Angular4でアプリで外だしのファイルで設定値などを変えたい
Angular4でアプリで外だしのファイルで設定値などを変えたいです。
(説明が下手で申し訳ないです…)
https://stackoverflow.com/questions/46001669/blank-page-except-index-html-with-angular-4-in-tomcat-environment
ng build --prod --aot=false --output-hashing=none --base-href=/Test/
その後、webappsへ配置してみると以下へのアクセスで画面表示が可能でした。
ビルド結果は以下のような形になっていました。
\webapps\Test\assets
\webapps\Test\3rdpartylicenses.txt
\webapps\Test\favicon.ico
\webapps\Test\index.html
\webapps\Test\inline.bundle.js
\webapps\Test\main.bundle.js
\webapps\Test\polyfills.bundle.js
\webapps\Test\styles.bundle.css
\webapps\Test\vendor.bundle.js
そこで以下にsettingファイルなどを置き、こちらの設定値を書き換えることで、
ビルドしなおさなくても取得できるようにしたいのですが、
どのようにするのが一般的でしょうか?(そもそもできるのでしょうか?)
\webapps\Test\setting.???
◆追記
shimiteiさまのご回答から以下を追加しました。
◇config.service.ts
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) { }
// public getConfig(key: any) {
// return this.config[key];
// }
public getConfig(key: any) {
if (!Array.isArray(key)) {
return this.config[key];
}
let res: any = this.config;
key.forEach(k => res = res[k]);
return res;
}
load() {
return new Promise((resolve) => {
this.http.get('config.json')
.map(res => res.json())
.subscribe(json => {
this.config = json;
resolve();
});
});
}
}
◇config.json
※src直下に配置
{
"testFlag": false
}
◇app.module.ts
回答いただいた内容を追加
呼び出したい箇所で以下を実施。
this.configService.getConfig("キー");
すると、ConfigServiceのload()が呼ばれることは確認できたのですが、
config.jsonがstatus: 404, statusText: "Not Found"で怒られてしまいます。
ためしに「assets」の下にjsonを持っていき、
this.http.get('assets/config.json')
と変えてみましたが、同じようにエラーとなってしまいました。
jsonファイルを配置する箇所に制限があったりするのでしょうか?
◆さらに修正
★箇所にて
「core.es5.js:1020 ERROR SyntaxError: Unexpected token / in JSON at position 4」が出てしまいました。
JSONにコメントを入れていたことが原因のようです。コメントを削除し、以下のようにしました。
それで無事取得できました!
this.config = response.json() as ConfigData;
◇config.data.ts
export class ConfigData {
constructor(private testFlag: boolean) {
}
}
export class ConfigService {
config: any;
constructor(private http: Http) { }
public getConfig(key: any) {
if (!Array.isArray(key)) {
return this.config[key];
}
let res: any = this.config;
key.forEach(k => res = res[k]);
return res;
}
load() {
return new Promise((resolve) => {
this.http.get('assets/config.json')
.subscribe(response => {
this.config = response.json() as ConfigData;
resolve();
});
});
}
}