Lazy loading en Angular 9

Hoy vamos a ver cómo podemos utilizar el patrón de «lazy loading» en nuestra aplicación Angular para conseguir que esta cargue más rápidamente y mejorar la experiencia del usuario.

¿Qué es «lazy loading»?

«Lazy loading» (o «carga asíncrona» o «carga diferida») es una técnica que se utiliza en Angular y consiste en retrasar la carga o inicialización de los objetos al momento de su utilización. Esto mejora el rendimiento de las aplicaciones, puesto que, cuando iniciamos una aplicación Angular, se cargan los componentes que se encuentren en el módulo principal app.module.ts y con Lazy loading solo se cargan los que se necesiten al inicio de la aplicación, el resto se cargan mediante el motor de «routing» interno.

Configurar la aplicación

En otras entradas del blog ya hemos visto cómo usar el CLI de Angular para crear proyectos, pero ahora vamos a ver cómo crear un proyecto Angular con Lazy loading. Para ello tenemos que añadir –routing cuando generemos el proyecto, ejecutando el siguiente comando:

$ ng new customer-app --routing

Donde customer-app será el nombre de la aplicación. Esto generará el archivo app-routing.module.ts, que es un módulo de ruta listo para funcionar.

Para usar la opción --routing se requiere Angular/CLI version 8.1 o superior.

A continuación, necesitamos un módulo con un componente al que enrutar. Para hacer uno ejecutamos el siguiente comando:

$ ng generate module customers --route customers --module app.module

Esto crea el nuevo módulo de carga asíncrona "CustomersModule" definido en "customers.module.ts" y el módulo de enrutamiento "CustomersRoutingModule" definido en "customers-routing.module.ts". Vamos a mostrar un ejemplo de cargar un componente con carga asíncrona:

En el fichero "customers-routing.module.ts" creamos la rutas hija para cargar el componente haciendo uso de "forChild()" para especificar que ese módulo va a servir rutas hijas:

import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;

import { Componente } from ‘./componente.component’;

const routes: Routes = [
 {
 path: ‘’, component: Componente
 }

];

@NgModule({
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule]
})

export class CustomersRoutingModule { }

En el fichero customers.module.ts tendremos importado el CustomersRoutingModule:

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { CustomersRoutingModule } from ‘./customer-routing.module’;
import { Componente } from ‘./componente.component’;

@NgModule({
 declarations: [Componente],
 imports: [
 CommonModule,
CustomersRoutingModule
 ]
})

export class CustomersModule { }

En app-routing.module.ts, en lugar de cargar el componente, directamente pondremos la ruta de este nuevo módulo mediante loadChildren() de la siguiente forma:

import { NgModule } from ‘@angula/core’;
import { Routes, RouterModule } from ‘@angular/router’;

const routes: Routes = [
 {
 path: ‘customers’,
 loadChildren: () => import(‘./customers/customers.module’).then(m => m.CustomersModule)
 }
];

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

export class AppRoutingModule { }

En nuestro "app.component.ts" pondremos un botón para el link a ese componente:

<button routerLink= “/componente””>Componente</button>

<router-outlet></router-outlet>

Verificar Lazy-loading

Para probar si el componente se está cargando con lazy-loading basta con ejecutar el comando:

$ ng serve

Este comando abrirá la aplicación en "http://localhost:4200" y solo tendremos que abrir la consola del navegador e ir a la pestaña “Red”. Cuando hagamos click sobre el botón veremos cómo se carga el componente.

Espero que os haya servido para conocer cómo funciona Lazy-loading y que podáis introducirlo en vuestros proyectos. 

¡Nos vemos en el siguiente post!