Saltar al contenido

Cómo implementar Lazy Loading en AngularNov, 2ndThe angular CLI es una herramienta de interfaz de línea de comandos que puede crear un …

marzo 13, 2020

 El

angular CLI es una herramienta de interfaz de línea de comandos que puede crear un proyecto, añadir archivos, y realizar una variedad de tareas de desarrollo en curso, como las pruebas, la agrupación, y el despliegue.

Si necesita actualizar CLI angular entonces se puede actualizar fácilmente mediante el uso de los siguientes comandos.

npm install -g @angular/cli ng new PROJECT-NAME
cd PROJECT-NAME
ng serve --open

ng de nuevo se utiliza para generar repetitivo angular.

¿Cuál es la carga perezosa?

Lazy carga nos ayuda a descargar las páginas web en trozos en lugar de descargar todo en un gran paquete.

para implementar la carga diferida en angular que necesitamos para crear un módulo de enrutamiento y un archivo module.ts para el componente que necesitamos para la carga perezosa.

En la imagen de arriba, hemos creado dos archivos que son puestos de routing.module.ts y posts.module.ts.

Ahora vamos a ver lo que necesitamos código en estos dos archivos.

puestos de routing.module.ts

En el código anterior primero se creó una matriz de rutas a un objeto que contiene ruta y componente.

En la línea 14 estamos pasando la matriz de rutas como un argumento para el método RouterModule.forChild.

posts.module.ts

Aquí hemos añadido un PostsComponent a la matriz declaraciones, eso es todo hemos terminado con los componentes de nivel infantil.

Ahora tenemos que crear un nuevo archivo llamado app-routing.module.ts en el nivel raíz de su aplicación significa dentro de la carpeta de aplicaciones.

app-routing.module.ts

app.module.ts

En el app.module.ts archivo tenemos que eliminar las declaraciones de los componentes whichwe quiere cargar perezoso.

Esta es nuestra salida final

¿has visto en la imagen anterior que implementa con éxito la carga lenta?

Código repository

feliz de codificación …