Angular Lazy loading sin el router 😱

Seguramente leíste como mínimo un articulo sobre “performance en Angular” y no importa quien o cuando lo escribió, siempre pero siempre te recomiendan utilizar el “Lazy Load”.

Siempre que se habla de Lazy Load, se hace sobre el modulo de Router, Angular tiene un router muy poderoso que permite cargar los módulos a travez del “lazy load” y así aprovechar al máximo la carga tardía.


El problema es que cada aplicación tiene distintas dificultades y necesidades, dependiendo el camino que elijamos para realizarla.

Un tema que siempre esta latente, es utilizar o no un sistema de “state manager”, utilizar o no X librería extra… Pero nunca se discute de la carga a travez del “lazy load” esta siempre la tenemos que utilizar…

Pero que pasa si te digo que tenemos mas formas de utilizar “lazy load” a travez de eventos… Claro, en estos momentos estoy imaginado tu cara o tus pensamientos, Jorge esta loco, ya esta desvariando.

Pero no, claro que no! Un gran amigo de la comunidad creo una librería para poder hacer esta carga “lazy” de componentes.

Pero, ¿Vos me estas diciendo que no necesito cambiar la URL para poder hacer “lazy load”?

SI, EXACTAMENTE ESO!


Veamos paso a paso cómo funciona y cómo podemos agregarlos a nuestro proyecto!

Claro, lo primero es instalar nuestra dependencia:

npm install @herodevs/lazy-af

Una vez instalado vamos a declararlo en nuestro angular.json

De esta forma vamos a indicarle a al CLI de Angular, que nos prepare ese modulo como un “paquete separado”.

Esto se parece mucho a la sintaxis de loadChildren para una ruta. Esto se debe a que esta propiedad lazyModules está haciendo lo mismo que la propiedad loadChildren en una ruta. Ahora, la CLI angular sabe crear un paquete separado para el TestModule.


Ahora tenemos que importar LazyModules


Ahora gracias a estos 3 pasos ya podemos utilizar nuestro lazy module!

Pero ¿Como lo usamos?

En nuestro componente donde lo queremos “llamar” vamos a tener que agregar nuestro tag lazy-af:

Y por ultimo, vamos a tener que decirle a nuestro modulo que va a tener que “boostrapear” nuestro componente


Bueno hasta ahi genial… pero veamos un ejemplo funcional con un video :)