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);
問題はここにあります。環境ファイルにデータを取得できません。理由やエラーの場所がわかりません。それは私のウィンドウ変数にありますか?または、環境ファイル内のデータを取得する別の方法はありますか?
よろしくお願いします。