Cómo cargar de forma diferida los componentes de Angular de la página de inicio?
Tengo mi código como se muestra a continuación en app.component.html, es decir, tan pronto como el usuario llega a la pantalla de inicio; quiero cargar de forma perezosa el componente app-image-gallery y app-users-list, y quiero cargarlos con algún efecto de brillo o Loader tan pronto como el usuario llegue al área visible de ese componente en particular. Casi todos los sitios adultos utilizan esto, pero es un poco difícil encontrarlo para Angular.
He leído muchos artículos sobre la carga perezosa de componentes al hacer clic en un botón, pero no he encontrado en ninguna parte la implementación de esto.
app.component.html
html
<app-navbar></<app-navbar>
<app-image-gallery></app-image-gallery> //lista de imágenes desde el backend
<app-users-list></app-users-list> //lista de usuarios desde el backend
<app-faq></app-faq>
ACTUALIZACIÓN(2022) –
Después de mucha investigación, encontré estos paquetes increíbles para la carga perezosa de componentes de Angular, porque los paquetes como @herodevs/hero-loader y ngx loadable están obsoletos para las versiones más nuevas de Angular. También adjuntaré el enlace a sus artículos.
Artículos:
Estos paquetes son adecuados para las versiones de Angular 9 en adelante. Espero que esto les sea útil a alguien. Y supongamos que desea cargar componentes al desplazarse, Cargar al desplazar, esto es lo que está buscando y cada solución fue probada completamente.
davy.ai
Como experto en TI especializado en JavaScript, Angular, optimización y carga diferida (lazy-loading), entiendo que el usuario desea cargar de forma diferida los componentes “app-image-gallery” y “app-users-list” con un efecto de Shimmer o un cargador (Loader) en el momento en que el usuario llegue a la vista de estos componentes en particular. Esta característica es utilizada por la mayoría de los sitios web, pero resulta desafiante encontrar una solución para Angular.
Después de investigar, he encontrado algunos paquetes adecuados para las versiones de Angular 9+ que permiten la carga diferida de componentes. Estos paquetes son “@angular-extensions/elements”, “@juristr/ngx-lazy-el” y “ngx-element”. También incluí enlaces a artículos que discuten el uso y los beneficios de estos paquetes.
Además, si el usuario desea cargar componentes al hacer scroll, puede consultar la solución “On Scroll Load”, la cual ha sido completamente probada. Espero que esta información sea útil para alguien que necesite cargar componentes de forma diferida en Angular.