0

Angular アプリをビルドするために、実行時に json ファイルから構成変数を読み込みたい

src ディレクトリに json ファイル app.conf.json を作成しました。

{
 "API_URL": "http://localhost/backend/",
 "SERVER_URL": "http://localhost/MyApp/assets/uploads"
}

抽象クラス AppConfig を作成しました:

 export abstract class AppConfig {
API_URL: string;
SERVER_URL: string;
}

サービスを作成しました

import { Injectable } from '@angular/core';
import {AppConfig} from './app-config';
import {HttpClient} from '@angular/common/http';

// to stock data
declare var window: any;


@Injectable({
  providedIn: 'root'
})
export class JsonAppConfigService extends AppConfig {

constructor(private httClient: HttpClient) {
  super();
}

/** Cette fonction va retourner une promise (charger le fichier app.config.json
 * depuis le repertoire src du frontend
 */
load() {
 return this.httClient.get<AppConfig>('app.config.json')
  .toPromise()
  .then(data => {
      this.API_URL = data.API_URL;
      this.SERVER_URL = data.SERVER_URL;
      this.ldaps = data.ldaps;
      window.config = data;
      console.log(window.config);
    })
  .catch(() => {
    console.log('Erreur : le fichier de configuration ne peut pas être chargé ');
  });
 }
}

その後、app.module.ts でプロバイダーを作成しました。

export function appInitializer(jsonAppConfigService: JsonAppConfigService) {
   return () => {
    return jsonAppConfigService.load();
 };
}

providers [ ...,
 { provide: AppConfig, deps: [HttpClient], useExisting: JsonAppConfigService},
 { provide: APP_INITIALIZER, deps: [JsonAppConfigService], useFactory: appInitializer, 
 multi: true},
]

これでファイルがロードされ、データ (window.config) を environment.ts ファイルに渡したいと思います。そのために、環境を拡張できるクラスを作成しました。

declare var window: any;

export class DynamicEnvironment {
public get environment() {
  return window.config;
 }
}

そして、私のenvronment.tsファイルで:

import { DynamicEnvironment } from './dynamic-environment';


class Environment extends DynamicEnvironment {

public production: boolean;
constructor() {
super();
this.production = false;
 }
}

export const environment = new Environment();
console.log(environment);

問題はここにあります。環境ファイルにデータを取得できません。理由やエラーの場所がわかりません。それは私のウィンドウ変数にありますか?または、環境ファイル内のデータを取得する別の方法はありますか?

よろしくお願いします。

4

0 に答える 0