Configuration

Créer une interface qui décrit la configuration souhaitée:

export interface IAppConfig {
  api: {
    baseUrl: string;
  };
}

Créer un service de configuration qui a deux méthodes, une pour charger le fichier de configuration et l'autre pour l'obtenir:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
import { IAppConfig } from './app-config.interface';
 
@Injectable()
export class AppConfigService {
  private appConfig: IAppConfig;
 
  constructor(private http: HttpClient) {}
 
  public loadAppConfig(): Promise<void> {
    return this.http
      .get<IAppConfig>('/assets/data/appConfig.json')
      .toPromise()
      .then((config: IAppConfig) => {
        this.appConfig = config;
      });
  }
 
  public getAppConfig(): IAppConfig {
    return this.appConfig;
  }
}

Remarquez que l'on revoit une promesse, plutôt qu'un observable, c'est parce que APP_INITIALIZER ne supporte que les promesses.

Ensuite, dans le module de l'application, ajouter dans les providers le service de configuration et la fonction d'initialisation:

  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFn,
      multi: true,
      deps: [AppConfigService]
    }
  ],

const appInitializerFn = (appConfigService: AppConfigService) => () =>
  appConfigService.loadAppConfig();

Ne pas oublier d'importer HttpClientModule si ce n'est pas déjà fait.

Source: Compile-time vs. Runtime configuration of your Angular App