Posted at

Angular2アプリに設定config.jsonを持たせる

More than 1 year has passed since last update.

Angular2アプリの設定をJSONで用意し、デプロイ後に設定JSONを変更することでアプリの動作を変更できるようにしたい。


実現方法

APP_INITIALIZERのDIを利用することで、アプリの初期化中に任意の処理を行うことができます。

若干起動に時間がかかるようになることが予想されますが、設定JSON取得後にアプリが立ち上がるためシンプルに実装できます。


実装例

環境はangular-cli@1.0.0-beta.21で、angular 2.2.1、rxjs@5.0.0-beta.12です。

JSONデータの読み出しと保持するConfigService。

configが必要なcomponentにこのサービスをDIして使います。

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ConfigService {
config: any;
constructor(private http: Http) { }

load() {
return new Promise((resolve) => {
this.http.get('config.json')
.map(res => res.json())
.subscribe(json => {
this.config = json;
resolve();
});
});
}
}

app.module.tsにAPP_INITIALIZERでの処理を追加します。

@NgModule({

...
providers: [
ConfigService,
{
provide: APP_INITIALIZER,
useFactory: configFactory,
deps: [ConfigService],
multi: true
},
],
...
})

export function configFactory(cs: ConfigService) {
return () => cs.load();
}

Angular 2.2.1ではuseFactory部分は次のように記述しても問題ないようです。

useFactory: (config: ConfigService) => () => config.load(),

Angularのバージョンか、Angular-CLIのバージョンを上げると次のようなエラーが出るためuseFactoryにはexport functionを指定しましょう。


Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function ...



参考