Imagen destacada para el post: Cómo precargar datos en Angular antes de que se inicialice la aplicación
  • Tutorial
  • Programación
  • Angular

Cómo precargar datos en Angular antes de que se inicialice la aplicación


Un gran poder conlleva una gran responsabilidad.

Hay veces que necesitamos precargar datos de la aplicación, datos del usuario, datos del sistema, etc. Mucha gente carga datos en el constructor u OnInit del primer componente que existe, que sería app.component.ts, pero muchas veces eso se hace por desconocimiento, puede que sea lo que quieres, pero ¿y si lo necesitas antes de que se cargue todo? Aquí entra en juego APP_INITIALIZER, donde puedes cargar datos que vayas a necesitar.

Como comenté al principio hay que tener cuidado. Primero te voy a explicar el gran poder, que es cómo se hace, y después la gran responsabilidad, con lo que hay que tener cuidado.

En app.module.ts hay que importar APP_INITIALIZER de @angular/core, y dentro de @NgModule, en los provider, tenemos que poner el siguiente código:

{
   provide: APP_INITIALIZER,
   useFactory: initializeApp,
   multi: true,
   deps: [MySuperService] // Esto sólo lo necesitas si vas a usar servicios
}

y por encima creamos la función initializeApp, yo la voy a poner como promesa, pero también puede ser un Observable con una llamada a la API, en ese caso tendrías que cargar en deps el servicio de HttpClient.

const initializeApp = (mySuperService: MySuperService) => () => new Promise<void>(async (resolve) => {
    ...
    await mySuperService.asyncFunction();
    ...
    resolve();
});

Y eso sería todo, dentro de initializeApp puedes hacer lo que quieras, llamar a cuantas funciones necesites, etc. Pero ahora va la responsabilidad, como te he comentado, todo esto se carga antes de iniciar el resto de componentes de angular, por lo que la aplicación se verá en blanco hasta que acabe de ejecutar todas estas promesas… no pongas llamadas a APIs pesadas, ni funciones complejas que tarden mucho tiempo en ejecutarse, porque los usuarios verán una bonita página en blanco mientras tú cargas los millones de Pokémon con sus fotos en 4k.

PD: En modo standalone es exactamente lo mismo, sólo que en vez de en app.module.ts es en main.ts dentro de bootstrapApplication.

¡Saludos, terrícola! 🖖


Últimas publicaciones

Todas las etiquetas