Para implementar la carga perezosa, comience por crear un proyecto Angular.
1$ ng new lazy-loading-demo
Shell
El proyecto está listo. Para aplicar la característica de carga perezosa, cree un módulo de características en AppModule.
1$ ng g m first --routing
Shell
El comando anterior se utiliza para crear un módulo, y –routing se utiliza para generar un módulo de enrutamiento.
Crear un componente en FirstModule. El componente no será parte de AppModule, y no lo importará a AppModule. FirstModule se cargará cuando sea necesario.
1$ ng g c /primero/componentes/primer --módulo primero
Shell
Esto creará un componente y lo registrará en FirstModule.
Ahora que el componente está listo en el Primer Módulo, está listo para empezar. Es hora de configurar AppRoutingModule.
app-routing.module.ts
1234567891011121314151617181920importar{NgMódulo}de"@angular/núcleo";importar{Rutas,MóduloRuta,Estrategia de Precarga,PrecargaTodos losMódulos}de"@angular/ruta";const rutas_Rutas=[{ camino: "primero", cargarNiños:". /first/first.module#FirstModule"}];@NgModule({ importa:[RouterModule.forRoot(routes)], exporta:[RouterModule]})exportclassAppRoutingModule{}ts
Para hacer que FirstModule forme parte de su aplicación, cárguelo en rutas.
Definir la ruta en el campo de la ruta del objeto de la ruta y la ruta del módulo en el campo de la carga de los niños.
Hay tres partes a configurar en el campo de carga Niños del objeto de la ruta.
- Trayectoria del módulo
- #
- Nombre del módulo
Así que finalmente, LoadChildren se verá como esto:
1loadChildren: $0027path#moduleName$0027
Shell
En la configuración anterior de AppRoutingModule, puede ver la configuración exacta que he explicado anteriormente.
Ya has hecho un componente en el Primer Módulo. Así que está listo para configurar FirstRoutingModule.
first-routing.module.ts
12345678910111213141516importar{NgModule}de"@angular/núcleo";importar{Rutas,Móduloenrutador}de"@angular/enrutador";importar{PrimerComponente}de"./componentes/primer/primer. componente";const rutas_Rutas=[{ trayectoria:"", componente:PrimerComponente}];@NgModule({ importa:[RouterModule.forChild(rutas)], exporta:[RouterModule]})exportclaseFirstRoutingModule{}ts
A continuación, configure los ajustes necesarios para que el Primer Componente forme parte de la ruta. Entonces estará listo para ejecutar la aplicación.
Crear un enlace con la ruta del Primer Componente para mostrar el primer módulo a ser cargado.
app.component.html
1<a[routerLink]="[$0027/primero$0027]"
html
Ahora ejecuta el proyecto y abre las herramientas de desarrollo haciendo clic en F12 , luego ve a la pestaña Red y actualiza la página haciendo clic en F5 .
Puedes ver la salida abajo.
Del mismo modo, en la pestaña Red , verás esto:
Como puedes ver, la aplicación cargó el main.js con todos los componentes de una aplicación.
Haga clic en el enlace que ha creado para ver el primer módulo que se cargará.
Después de hacer clic en el enlace, la pestaña Red se verá así:
Se puede ver que el Primer Módulo se ha cargado.
También puede ver la salida esperada en la página renderizada. Pero, ¿qué pasa si la ruta todavía tiene muchos componentes por cargar? Los usuarios volverán a enfrentarse al problema de la lentitud de la renderización. La estrategia de precarga ahora entra en escena para resolver el problema de la renderización lenta.