Lazy-loading con angular.

En esta ocasión vamos a trabajar un poco con angular. Ya había escrito de como Instalar angular cli en ubuntu 16.04. Vamos a crear una aplicación angular llamada lazy-test.

ng new lazy-test

Creamos una carpeta dentro de app, donde guardaremos todos los módulos, la llamaremos modules.

cd lazy-test/src/app

mkdir modules

cd modules

Dentro de modules gregamos un módulo OneModule.

ng generate module one

Nos ubicamos dentro de la carpeta one y agregamos dos componentes PageOne y PageTwo.

ng generate component PageOne

ng generate component PageTwo

Creamos el componente OneComponent.

ng generate component One --flat

Nota: el parámetro --flat permite crear el componente sin agregar una carpeta que lo contenga, es decir, crea el componente en la raíz del directorio donde nos encontramos.

Modificamos el contenido de one.component.html y lo cambiamos por lo siguiente:

<h1>Module One</h1>
<button [routerLink]="['./page-one']">Page One</button>
<button [routerLink]="['./page-two']">Page Two</button>
<router-outlet></router-outlet>

Agregamos un router para el módulo one.

ng generate class one.router

Esto genera el archivo one.router.ts y cambiamos su contenido por el siguiente:

import { RouterModule, Routes } from '@angular/router';
import { OneComponent } from './one.component';
import { PageOneComponent } from './page-one/page-one.component';
import { PageTwoComponent } from './page-two/page-two.component';

const ROUTES: Routes = [
  {
    path: '',
    component: OneComponent,
    children: [
      { path: 'page-one', component: PageOneComponent },
      { path: 'page-two', component: PageTwoComponent },
    ]
  }
];

export const oneRouter = RouterModule.forChild(ROUTES);

Con esto estamos creando las rutas page-one y page-two, que estarán enlazadas a los componentes PageOneComponent y PageTwoComponent respectivamente.

Importamos el router recién creado dentro de OneModule. Con lo que one.module.ts quedaría como el siguiente código.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageOneComponent } from './page-one/page-one.component';
import { PageTwoComponent } from './page-two/page-two.component';
import { OneComponent } from './one.component';
import { oneRouter } from './one.router';

@NgModule({
  imports: [
    CommonModule,
    oneRouter
  ],
  declarations: [PageOneComponent, PageTwoComponent, OneComponent]
})
export class OneModule { }

Vamos a crear un componente para ser utilizado como bienvenida, así podremos visualizar mejor el lazy load funcionando.

ng generate component Index

Ahora creamos las ruta dentro del módulo AppModule, para eso realizamos el siguiente comando ubicados en la carpeta app.

ng generate class app.router

El código siguiente es el que define la mágia del lazy load.

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { IndexComponent } from './index/index.component';

const ROUTES: Routes = [
  { path: '', component: IndexComponent },
  { path: 'module-one', loadChildren: './one/one.module#OneModule' }
];

export const appRouter: ModuleWithProviders = RouterModule.forRoot(ROUTES);

Importamos AppRouter en AppModule con lo que app.module.ts quedará como sigue:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { appRouter } from './app.router';
import { IndexComponent } from './index/index.component';


@NgModule({
  declarations: [
    AppComponent,
    IndexComponent
  ],
  imports: [
    appRouter,
    BrowserModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Po último modificamos el contenido del archivo src/app/app.component.html por el contenido siguiente:

<h1>{{title}}</h1>
<button routerLink="/">Index</button>
<button routerLink="/module-one">Module One</button>
<router-outlet></router-outlet>

Para probar la carga, iniciamos la aplicación

ng serve

Y navegamos a la ruta http://localhost:4200

En mi caso yo uso chrome, y al entrar en la consola del navegador, veo lo siguiente

Cuando navegamos hasta module-one, podremos ver como se carga one.module.chunk.js, que es el módulo OneModule haciendo acto de presencia al ser solicitado.

Con esto terminamos por ahora, más adelante cargaremos otro módulo y probaremos la carga perezosa anidada.

Hasta la próxima.

%d bloggers like this: