Angular 6 - arquitectura desde 0, proyecto con Lazy load

Publicado: 26 Mayo 2018 por Jose Luis García Martínez

Categorías:
Tutorial 19

Crea proyecto con Angular Cli
Crea Módulos, y páginas (componentes)
Configura los módulos

Con lazy load ayuda a disminuir el tiempo de inicio de cada página, ya que sólo cargamos lo que necesitamos, dicho de otra manera, cargamos el módulo que se necesita en ese momento.

Con este tutorial, podremos crear un proyecto en 10 minutos con lazy load, paso a paso. En github Angular—example-lazy-Load

Accede a la dist del ejemplo.

En este proyecto se ha creado varios módulos como ejemplo. No son necesarios para lazy load, pero en los proyectos grandes es muy importante la modularización.

Crea proyecto con Angular Cli

$ ng new lazyLoad

Crea Módulos, y páginas (componentes)

Añade los módulos necesarios

$ ng g m app-routing --flat
$ ng g m config --module app
$ ng g m shared --module app
$ ng g m components --module app

Añade los módulos para las 4 páginas de ejemplo

$ ng g m pages/+page1/page1-routing --flat
$ ng g m pages/+page2/page2-routing --flat
$ ng g m pages/+page3/page3-routing --flat
$ ng g m pages/+page4/page4-routing --flat

Crea las páginas de cada modulo. En este ejemplo, una página por módulo

 $ ng g c pages/+page1/page1
 $ ng g c pages/+page2/page2
 $ ng g c pages/+page3/page3
 $ ng g c pages/+page4/page4

Configura los módulos

app.module

// routes module
import { AppRoutingModule } from './app-routing.module';


// modules
import { ConfigModule } from './config.module';
import { SharedModule } from './shared/shared.module';

Importa AppRoutingModule

imports: [
    BrowserModule,
    SharedModule,
    ConfigModule,
    AppRoutingModule 
    ],

Exporta shared module

exports: [
AppComponent,
SharedModule,
ConfigModule
]

app-routing

// importamos routerModuler, necesario para enrutar
import { RouterModule } from '@angular/router';

// importamos módulo de config
import { ConfigModule } from './config.module';

Crea un componente sin lazy lazyLoad

ng g c components/sinLazyLoad --module app-routing

Crea las rutas:

const routes = [
    {
    path: 'sinLazy',
    component: SinLazyLoadComponent
    },
    {
    path: 'pagina1',
    loadChildren: './pages/+page1/page1.routing.module#Page1RoutingModule',
    data : {number : '1'}
    },
    {
    path: 'pagina2',
    loadChildren: './pages/+page2/page2.routing.module#Page2RoutingModule',
    data : {number : '2'}
    },
    {
    path: 'pagina3',
    loadChildren: './pages/+page3/page3.routing.module#Page3RoutingModule',
    data : {number : '3'}
    },
    {
    path: 'pagina4',
    loadChildren: './pages/+page4/page4.routing.module#Page4RoutingModule',
    data : {number : '4'}
    },
    { path: '**', pathMatch: 'full', redirectTo: 'sinLazy' }
];

Importa:

RouterModule.forRoot(routes),
ConfigModule

Exporta:

RouterModule

Así debe de quedar:

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    ConfigModule
  ],
  declarations: [SinLazyLoadComponent],
  exports: [
    RouterModule
  ]
})

Configuración de los modulos de cada lazyLoad:

Importa configModule, RouterModule

import { ConfigModule } from '../../config.module';
import { RouterModule } from '@angular/router';
import { Page1Component } from './page1/page1.component';

Crea las rutas (se pueden añadir tantas como se quiera)

const page1Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'componente1'},
  { path: 'componente1', component: Page1Component, data: {componente : 'uno'} }
];

Importa:

imports: [
    CommonModule,
    RouterModule.forChild(page1Routes),
    ConfigModule,
    SharedModule
  ],

Así en todas las páginas lazy load

... y finalmente... Si te ha gustado, difúndelo. Es solo un momento. escríbe algo en comentarios 😉 Gracias.