Es común tener que completar combos con datos paramétricos o bien recuperar datos de usuario que se ocupan en distintas partes de una aplicación. Por lo general escribimos un servicio que los va rescatando a medida que los necesitamos, pero esto no es óptimo ya que estaremos consultando varias veces la fuente de datos creando tráfico de más.

La solución más práctica es precargar todos los datos antes de que inicie la aplicación. Esto nos permitirá ahorrar tiempo de carga en cada componente y centralizar la ubicación de estos datos en un único servicio, por ejemplo.

En este artículo vamos a ver como implementar un hook al inicio de Angular, puedes también clonarte el repo de ejemplo o ver el proyecto directo en StackBlitz.

Creando el provider

Primero, vamos a crear un provider, que básicamente es una clase servicio que obtendrá nuestra data y la mantendrá cargada:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ParameterProvider {

  endpoint = 'https://api.dynamock.com:7443/6BXV5T2/angular-data-preload-sample';

  parameters: string[];

  constructor(private http: HttpClient) { }

  searchParameters() {
    return this.http.get(this.endpoint).toPromise().then((response: any) => {
      this.parameters = response.parameters;
    });
  }

}

Este es el servicio que obtendrá los parámetros, nada nuevo. Ahora haremos que se ejecute al inicio de la aplicación.

Ejecutar al iniciar Angular

Primero creamos el factory en app.module.ts:

export function parameterProviderFactory(provider: ParameterProvider) {
  return () => provider.searchParameters();
}

@NgModule({
...

Y por último, lo agregamos a la sección providers:

...
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: parameterProviderFactory,
      deps: [ParameterProvider],
      multi: true
    }
  ],
...

Y voilá! 🙂 El truco está en pasar el valor APP_INITIALIZER a la configuración del provider, ya que este indicará que la búsqueda se hará al iniciar la aplicación.

¡Ojo con el tiempo de carga!

Si el método invocado en el factory devuelve una promesa, la inicialización esperará a que esta se resuelva.

Dado que la aplicación quedará esperando a que se complete el llamado a la API, el cuidado hay que ponerlo en que esta no tome demasiado tiempo en responder ya que retrasará el arranque de Angular.

Una estrategia para evitar que nuestra aplicación tenga ese delay al inicio, sería almacenar los datos en localStorage, así la próxima vez que el navegador cargue la aplicación, el servicio devolverá los parámetros almacenados en localStorage en vez de consultar nuevamente a la API, y por lo tanto nos ahorraremos ese tiempo de consulta.

Conclusión

La ejecución de código al arranque de una aplicación es un hook que nos puede servir para muchas cosas, como precargar datos genéricos, información de usuario, validación de sesión, etc.

Recureda que puedes revisar el repo con un proyecto de ejemplo para que lo valides. Y el mismo proyecto en StackBlitz.