Cargar datos inicialmente de un fichero JSON en Angular 2+

Hola a todos, hoy os voy a enseñar a como cargar los datos de un fichero JSON al iniciar una aplicación Angular 2+.

Si tenemos un fichero JSON en assets y lo queremos cargar es sencillo, pero y ¿si lo necesitamos que este siempre disponible en la aplicación?

Lo primero, necesitamos crear un fichero JSON, lo vamos a crear dentro de assets (lo llamaremos data.json).

{
  "var1": "Hola",
  "var2": "Adios",
  "valores": [
    "A",
    "B",
    "C",
    "D"
  ]
}

Nos tenemos que crear un servicio para recuperar el fichero, lo llamaremos data.service.ts

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

@Injectable()
export class DataService {

  // Objeto donde guardaremos el contenido del fichero
  private _data: any;

  // importamos el servicio HttpClient
  constructor(
    private http: HttpClient
  ) { }

  /**
   * Obtiene toda la informacion del fichero data.json
   */
  public getData() {
    return new Promise((resolve, reject) => {
      this.http.get('assets/data.json')
        .subscribe(data => {
          this._data = data;
          resolve(true);
        }, error => {
          console.log('Error al obtener la configuracion: ' + error);
          reject(true);
        });
    })
  }

  /* Variables del fichero */

  get var1(){
    return this._data["var1"];
  }
  
  get var2(){
    return this._data["var2"];
  }
  
  get valores(){
    return this._data["valores"];
  }

}

Ahora nos vamos en app.module.ts, y tenemos que exportarnos una función, llamando a la función que antes hemos creado:

export function dataFactory(provider: DataService) {
  return () => provider.getData();
}

Seguimos estando en app.module.ts y en la parte de providers vamos poner lo siguiente:

providers: [
    DataService,
    {
      provide: APP_INITIALIZER,
      useFactory: dataFactory,
      deps: [DataService],
      multi: true
    }
  ]

Esto hará que al iniciar la aplicación, cargue el fichero y lo tengamos disponible, cuando queramos.

Os dejo un ejemplo en stackblitz para que veáis el ejemplo completo en vivo.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte