Angular Lazy loading sin el router 😱

Jorge Cano
Feb 27, 2019 · 2 min read

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 :)


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store