Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:javascript:angular:configuration [2018/12/27 21:23] – créée sgariepy
+++ web:javascript:angular:configuration [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
 ====== Configuration ======
+Créer une interface qui décrit la configuration souhaitée:
+<code javascript>
+export interface IAppConfig {
+  api: {
+    baseUrl: string;
+  };
+}
+</code>
+Créer un service de configuration qui a deux méthodes, une pour charger le fichier de configuration et l'autre pour l'obtenir:
+<code javascript>
+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;
+  }
+}
+</code>
+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:
+<code javascript>
+  providers: [
+    AppConfigService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appInitializerFn,
+      multi: true,
+      deps: [AppConfigService]
+    }
+  ],
+</code>
+<code javascript>
+const appInitializerFn = (appConfigService: AppConfigService) => () =>
+  appConfigService.loadAppConfig();
+</code>
+Ne pas oublier d'importer ''HttpClientModule'' si ce n'est pas déjà fait.
 Source: [[https://juristr.com/blog/2018/01/ng-app-runtime-config/|Compile-time vs. Runtime configuration of your Angular App]]