Angular : Lazy Loading, o carga diferida

 Lazy Loading, o carga diferida, es una técnica utilizada en Angular para cargar módulos de la aplicación solo cuando son necesarios, en lugar de cargarlos todos de una vez durante el arranque inicial de la aplicación. Esto mejora el rendimiento de la aplicación al reducir el tiempo de carga inicial y distribuir la carga de los módulos a lo largo del ciclo de vida de la aplicación.

 Lazy-loading feature modules:  https://angular.dev/guide/ngmodules/lazy-loading

Componentes de Lazy Loading en Angular v18

1. RouterModule: Configura el enrutamiento y define las rutas para los módulos cargados de manera diferida.
2. Routes: Define las rutas, incluyendo las rutas de carga diferida.
3. loadChildren: Propiedad utilizada en las rutas para especificar el módulo que debe cargarse de manera diferida.
4. NgModule: Módulo que se carga de manera diferida.

 

Videotutoriales 

1.  Angular 2023 #8 Rutas En Angular  https://youtu.be/jKabdJTNe4I
2. Carga perezosa (Lazy loading): https://youtu.be/ViAIK9-piEw 
3. Lazy loading en Angular 17  https://youtu.be/Pgx8pUKZyPA
4. Módulos y Lazy Loading en Angular   https://youtu.be/gb8R2QDwC9A 
5. Lazy loading de componentes en Angular 17  https://youtu.be/HGp4MIZggYE
   

 

 Interpretación de cada componente

 

 

 

RouterModule:

Configura las rutas principales de la aplicación y permite la carga diferida de módulos.

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

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
];

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

 

Routes:

Define las rutas de la aplicación, incluyendo las rutas de carga diferida.

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
];

 

loadChildren:

Propiedad utilizada en las rutas para especificar el módulo que debe cargarse de manera diferida.

{ path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }

 

NgModule:

Módulo que se carga de manera diferida.

// home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class HomeModule {}

 

Código para Lazy Loading

Con esta configuración, la aplicación utilizará Lazy Loading para cargar los módulos Home y About solo cuando se navegue a sus respectivas rutas. Esto mejora el rendimiento de la aplicación al reducir el tamaño del paquete inicial y distribuir la carga de los módulos a lo largo del uso de la aplicación.

Configurar Módulo de Enrutamiento Principal

Define y configura el módulo de enrutamiento principal de la aplicación.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
];

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

 

Configurar Módulo Principal

Importa el módulo de enrutamiento en el módulo principal de la aplicación.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

 

Definir Módulo y Componente Home

Configura el módulo y componente Home.

// home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [{ path: '', component: HomeComponent }];

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule, RouterModule.forChild(routes)]
})
export class HomeModule {}

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `
Home Component
`
})
export class HomeComponent {}

 

Definir Módulo y Componente About

Configura el módulo y componente About.

// about.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AboutComponent } from './about.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [{ path: '', component: AboutComponent }];

@NgModule({
  declarations: [AboutComponent],
  imports: [CommonModule, RouterModule.forChild(routes)]
})
export class AboutModule {}

// about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: `
About Component
`
})
export class AboutComponent {}

 

Configurar Componente Principal

Configura el componente principal para usar el RouterOutlet y RouterLink para la navegación.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <nav>

    <a routerLink="/home">Home</a>

    <a routerLink="/about">About</a>

    </nav>

    <router-outlet></router-outlet>
  `
})
export class AppComponent {}

 

.................................