Trabajando con Lazy Loading en Angular 8, 9, 10
Tags: angular8, angular9, angular10, lazyloading
Published: 2020-08-18 16:44:40

---
title: Trabajando con Lazy Loading en Angular 8, 9, 10
published: true
description: Mejorar el rendimiento de nuestras apps Angular con esta técnica
tags: angular8, angular9, angular10, lazyloading
//cover_image: https://direct_url_to_image.jpg
---

<article class="h-entry">

<div class="section-content">

<div class="section-inner sectionLayout--insetColumn">

En este artículo os voy a hablar de Lazy Loading, técnica que sirve para la mejora del rendimiento y velocidad de las aplicaciones Angular y que se implementará a partir de la versión 8, haciendo uso de la importación del módulo en vez de traer la referencia en un string. Este cambio, hay que hacerlo si o si en la versión 9 que salió a la luz a principios de febrero del 2020.

Por esa razón, os voy a enseñar a trabajar aplicando la técnica Lazy Loading en Angular que nos va a ayudar a mejorar el rendimiento de nuestras aplicaciones y en consecuencia, conseguiremos que el usuario final tenga una experiencia de navegación más agradable y satisfactoria

### 1.- ¿Qué pasa cuando una aplicación de Angular inicia?

Por defecto, nuestras aplicaciones de Angular cargan todos los componentes que están importados en nuestro módulo principal `app.module.ts` y dependiendo de los módulos que contenga puede ser que tarde más o menos en cargar nuestra aplicación.

Para resolver ese problema en el que a veces cargamos módulos que igual no utilizaremos en ningún momento, aplicaremos lo que es Lazy Loading.

### 2.- ¿Qué es Lazy Loading?

Según lo que encontramos en [Wikipedia](https://es.wikipedia.org/wiki/Lazy_loading)

> La **carga diferida** (en inglés **_lazy loading_**), es un [patrón de diseño](https://es.wikipedia.org/wiki/Patr%C3%B3n_de_dise%C3%B1o "Patrón de diseño") comúnmente usado en la programación informática que consiste en retrasar la carga o inicialización de un objeto hasta el mismo momento de su utilización. Esto contribuye a la eficiencia de los programas, evitando la precarga de objetos que podrían no llegar a utilizarse. El opuesto de la carga diferida es la carga previa, precarga o _eager loading_.

**Esta técnica usada en Angular** nos permite cargar sólo, el o los componentes que necesitemos al inicio de nuestra aplicación, estos componentes no cargan cada vez que entres, sino que solo cargan una sola vez.

Cuando usamos Lazy Loading hacemos llamado de un módulo mediante el sistema de rutas de Angular y este módulo a su vez tiene rutas hijas que se encargan de cargar el componente solicitado por el usuario, más adelante entenderemos esto mejor.

### 3.- Comenzando con el proyecto

Vamos a crear el proyecto

#### 3.1.- Crear proyecto Angular

<pre name="3ae5" id="3ae5" class="graf graf--pre graf-after--h4">ng new angular-lazy-loading --routing --style=css && cd angular-lazy-loading</pre>

`--routing`: Para que nos genere un módulo de ruta listo para funcionar

`--style=css`: Para que nos añada las hojas de estilos CSS

Ahora que ya tenemos nuestro proyecto creado, el siguiente paso que vamos hacer es generar 3 componentes.

#### 3.2.- Crear los componentes / módulos para el proyecto

Vamos a crear los componentes llamados **home**, **about, contact** con sus módulos que se encargarán de gestionar la carga de la información mediante la gestión de sus rutas hijas

#### 3.2.1.- Creación de los módulos

<pre name="a62f" id="a62f" class="graf graf--pre graf-after--h4">ng g m @pages/home --routing  
ng g m @pages/about --routing  
ng g m @pages/contact --routing</pre>

El resultado será el siguiente donde podremos ver que se han creado dos ficheros por carpeta:

<figure name="ca6d" id="ca6d" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 465px;">![](https://cdn-images-1.medium.com/max/800/1*Hy-zdBqljAaHeL0gVpeyjA.png)</div>

</figure>

Uno de ellos es el módulo principal donde vamos a cargar los componentes, módulos que necesitemos y el modulo de enrutamiento.

El otro fichero es el que corresponde al módulo de enrutamiento donde vamos a cargar el componente con una ruta hija.

#### 3.2.2.- Creación de los componentes

<pre name="ef9c" id="ef9c" class="graf graf--pre graf-after--h4">ng g c @pages/home --skipTests=true  
ng g c @pages/about --skipTests=true  
ng g c @pages/contact --skipTests=true</pre>

> La opción **--skipTests=true** corresponde a la exclusión de los ficheros de los tests que no vamos a necesitar en este caso.

Estos serían los ficheros que compondrían una página que se va a cargar mediante Lazy Loading. En este caso os muestro el que corresponde a “about”

<figure name="b5ae" id="b5ae" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 489px; max-height: 271px;">![](https://cdn-images-1.medium.com/max/800/1*aqGBN0UfJjreUwAUHvauQQ.png)</div>

</figure>

### 4.- Añadir rutas hijas en los módulos para las páginas

Ahora vamos a trabajar sobre el módulo **about-routing.module.ts.**

Dentro de este archivo creamos la ruta hija que servirá para cargar el componente **about.component.ts** desde el módulo **about.module.ts**

Primero importamos los componentes que van a depender de ese módulo, creamos las rutas y luego dentro de **imports** hacemos uso de **forChild** para especificar que ese módulo va a servir rutas hijas.

En el fichero **about.module.ts** ya tenemos importado el AboutRoutingModule

Hacemos los mismo pero con las páginas **home** y **contact**.

**home-routing.module.ts**

**contact-routing.module.ts**

### 5.- Configurando el fichero principal de rutas

Ahora vamos a nuestro módulo de rutas principales **app-routing.module.ts** que quedará de la siguiente manera:

Dentro de nuestra variable **routes** vamos almacenar todas las rutas principales de nuestra aplicación.

1.  Ruta **home**, aquí le decimos a Angular, cuando la ruta sea igual a **home** carga el **hijo haciendo referencia al HomeModule. Si os fijáis aquí ya está aplicando el Lazy Loading.**
2.  Ruta **about** y **contact**, hacemos lo mismo pero haciendo las referencias a los módulos que les corresponden.
3.  La última ruta le dice a Angular, cuando no especifique una url, llévame a la ruta **home**

El último paso es visualizar la información navegando entre diferentes páginas

### **6.- Comprobar rutas y visualizar las páginas**

Accedemos al fichero app.component.html y borramos todo el contenido para añadir el siguiente:

Dejamos tres enlaces para navegar entre las diferentes páginas y el elemento **“router-outlet”** para cargar esas páginas.

> Para notar el cambio abrimos la consola del navegador y vamos a la pestaña “Red” (es necesario reiniciar la página para poder capturar los archivos en esta pestaña).

<figure name="b8bd" id="b8bd" class="graf graf--figure graf-after--blockquote">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 257px;">![](https://cdn-images-1.medium.com/max/800/1*ri5WhjEvf7JN1H1OC4Ki3A.png)</div>

</figure>

Ahora vamos hacer click a nuestro enlace para ir a la página **“about”**

<figure name="d468" id="d468" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 452px;">![](https://cdn-images-1.medium.com/max/800/1*txPxAfBXwkvM-ifi-gkfsA.png)</div>

</figure>

Y lo mismo con la página **“contact”**

<figure name="412c" id="412c" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 425px;">![](https://cdn-images-1.medium.com/max/800/1*tDpOyZ-MPpMKCMgS4bMpTw.png)</div>

</figure>

Si volvemos a cargar cualquiera de las páginas, ya no se cargarán los ficheros porque ya los tendremos cargados con la ejecución inicial de cada uno.

### 7.- Resultado del código

Este es el resultado de lo trabajado en este artículo.

<div name="bd00" id="bd00" class="graf graf--mixtapeEmbed graf-after--p">[**Anartz Mugika Ledo / lazy-loading-angular**  
_Ejemplo de Lazy Loading Sencillo_gitlab.com](https://gitlab.com/mugan86/lazy-loading-angular "https://gitlab.com/mugan86/lazy-loading-angular")[](https://gitlab.com/mugan86/lazy-loading-angular)</div>

### **8.- Cursos**

En relación con este artículo, os cuento que dispongo de varios cursos en Udemy a precios ecónocimicos en los que podéis aprender muchas cosas. Los cursos que dispongo actualmente:

*   NPM.Desarrollo y publicación de librerias en JS, TS, Angular (PAGO)
*   GraphQL con Angular de 0 a Experto. JWT, Sockets, MongoDB (PAGO)
*   Compodoc: Crea documentación en proyectos Angular/Ionic/TS (GRATIS)

Todos los cursos al mejor precio [SIEMPRE en mi web](https://anartz-mugika.com/#/courses)

</div>

</div>

</section>

</section>

<footer>

[Canonical link](https://medium.com/@mugan86/trabajando-con-lazy-loading-en-angular-8-e1611ce2c46f)

</footer>

</article>