Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de módulo de carga diferida en Angular 10/9 con loadChildren & Dynamic Imports

 La carga diferida es el proceso de cargar algunas características de su aplicación Angular solo cuando navega a sus rutas por primera vez. Esto puede ser útil para aumentar el rendimiento de su aplicación y disminuir el tamaño inicial del paquete transmitido al navegador del usuario.

En Angular 10 y versiones anteriores hasta Angular 8, la sintaxis de los módulos de carga diferida ha cambiado y ahora está más alineada con la API del navegador estándar.

Ahora necesita usar la sintaxis de importación dinámica para importar su módulo en la loadChildrenpropiedad de las rutas del enrutador angular .

La API de importación dinámica es una API de navegador estándar introducida en los navegadores modernos. Está basado en promesas y le da acceso al módulo, desde donde se puede llamar a la clase del módulo.

Según v8.dev

Dynamicimport() introduce una nueva forma similar a una función importque desbloquea nuevas capacidades en comparación con la estática import.

Dado que import()devuelve una promesa, es posible usar async/ en awaitlugar del thenestilo de devolución de llamada basado en.

¡Veamos un ejemplo rápido!

Configuración de un proyecto de Angular 10

Necesita tener Angular CLI 10 instalado y un proyecto Angular 10 con configuración de enrutamiento.

Agregar un módulo Angular 10

Solo podemos cargar módulos de carga diferida en Angular, así que generemos un módulo de funciones usando Angular CLI 10:

$ ng generate module admin

A continuación, también podemos agregar un par de componentes en nuestro módulo:

$ ng generate component admin/login
$ ng generate component admin/dashboard

Uso loadChildrenpara cargar lentamente su módulo Angular 10

Angular proporciona la loadChildrenpropiedad de la ruta de una ruta para especificar el módulo que debe cargarse de forma diferida cuando se navega por primera vez.

Abra el src/app/app-routing.module.tsarchivo y actualícelo de la siguiente manera:

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

const routes: Routes = [
{ path: 'admin', loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule) },
];

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

En loadChildren, usamos la sintaxis de importación dinámica para cargar en forma diferida (carga a demanda) el módulo de administración.

Nota: La CLI debería crear automáticamente el archivo del módulo de enrutamiento si opta por agregar enrutamiento automáticamente en su proyecto; de lo contrario, debe crearlo manualmente y agregar el código requerido para configurar el enrutador.

Configuración de rutas en su módulo de funciones Angular 10

Después de configurar la ruta para cargar de forma diferida su módulo de funciones, a continuación, deberá agregar enrutamiento a los diversos componentes del adminmódulo que deben tener sus propias rutas separadas del módulo de enrutamiento principal que reside en el src/app/app-routing.module.tsarchivo.

Continúe y cree un admin/admin-routing.module.tsarchivo y agregue el siguiente código:

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

import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
    { path: '', component: LoginComponent },
    { path: 'dashboard', component: dashboardComponent }
];

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

Creamos las rutas a los diversos componentes de nuestro adminmódulo e incluimos estas rutas en el módulo de enrutamiento de administración.

Necesitamos alimentar las rutas al enrutador angular usando el forChild()método en lugar del forRoot()módulo.

Nota : También podríamos generar automáticamente el módulo de enrutamiento para el módulo de administración utilizando el --routinginterruptor, es decir ng generate module admin --routing --module=app.

Abra el src/app/admin/admin.module.tsarchivo e importe el módulo de enrutamiento de administración exportado de la siguiente manera:

import { AdminRoutingModule } from './admin-routing.module';

A continuación, agréguelo a la importsmatriz del módulo de administración:

@NgModule({
  imports: [
    CommonModule,
    AdminRoutingModule
  ],
  declarations: [LoginComponent, DashboardComponent]
})
export class AdminModule { }

Conclusión

Eso es todo lo que necesitamos para configurar módulos de carga diferida en Angular 10/9. Como resumen, hemos visto cómo usar la loadChildrenpropiedad de una ruta en el enrutador angular y la sintaxis de importación dinámica compatible con el estándar para cargar un módulo de administración de ejemplo.

Publicar un comentario

0 Comentarios