角度cliで再構築せずに.jsonファイルを更新するには？

Question

私は多角形を使って複数の言語を含むウェブサイトを構築しています。私は翻訳のためにng2-translateを使用します。

私は角度-cli.jsonで定義されてlanguages.jsonファイルのインポート：私のコントローラで

"assets": [ 
    "assets", 
    "fonts", 
    "languages.json" 
    ], 

を、私が必要と使用してデータを取得：

this.languages = require('../../../../languages.json'); 

は、JSONファイルの作品をロードします。デプロイ後、languages.jsonでいくつかの言語を変更（追加または削除）しようとしましたが、jsonファイルがdistで更新されても、変更はWebサイトに表示されません。私がウェブサイトを更新する唯一の方法は、オリジナルのjsonファイルを変更して、別のビルドを行い、もう一度デプロイすることです。 distのjsonファイルを更新するだけでウェブサイトを変更する方法はありますか？

説明のため、languages.jsonには言語コードの配列が含まれており、ウェブサイトの言語セレクタに表示される言語が定義されています。私はこの設定を使って、アプリケーションを再構築せずにウェブサイトに表示されている言語を変更したいと考えました。ここで

は私のpackage.jsonです：

{ 
"name": "myApp", 
"version": "1.0.0", 
"license": "MIT", 
"scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "dev": "ng serve --environment=dev", 
    "acc": "ng serve --environment=acc", 
    "prod": "ng serve --environment=prod", 
    "build:dev": "ng build --environment=dev", 
    "build:acc": "ng build --environment=acc", 
    "build:prod": "ng build --environment=prod", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
}, 
"private": true, 
"dependencies": { 
    "@angular/animations": "^4.0.2", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/compiler-cli": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/platform-server": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "angular2-localstorage": "git+https://github.com/zoomsphere/angular2-localstorage.git#master", 
    "core-js": "^2.4.1", 
    "foundation-sites": "^6.3.1", 
    "ng2-translate": "^5.0.0", 
    "rxjs": "^5.1.0", 
    "zone.js": "^0.8.5" 
}, 
"devDependencies": { 
    "@angular/cli": "1.0.0", 
    "@types/jasmine": "2.5.46", 
    "@types/node": "~7.0.12", 
    "codelyzer": "~3.0.0-beta.4", 
    "jasmine-core": "~2.5.2", 
    "jasmine-spec-reporter": "~3.2.0", 
    "karma": "~1.5.0", 
    "karma-chrome-launcher": "~2.0.0", 
    "karma-cli": "~1.0.1", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "karma-coverage-istanbul-reporter": "^1.0.0", 
    "protractor": "~5.1.0", 
    "ts-node": "~3.0.2", 
    "tslint": "~4.5.1", 
    "typescript": "^2.2.2" 
} 

Answer 1

私が今、まったく同じ問題を持っていると私はこのチュートリアルを使用するようだ：https://aclottan.wordpress.com/2016/12/30/load-configuration-from-external-file/

私はよく理解していれば、あなたの必要性を持っていることです"外部"変数は、アプリケーションコードを変更して再構築する必要なく変更できますか？

その場合は、ここで私が何をしたか、あなたのexempleに適用される：

• distのフォルダにそれを利用できるようにする「資産」フォルダ内の自分のlanguages.jsonファイルを保管してください。このデモで

私はexempleのためにこれを使用します。

{ 
    "languages": ["en", "fr"] 
} 

• をlanguages.jsonを指す環境ファイル（environments.tsとenvironments.prod.ts）でlanguageFileプロパティを追加します。 ：

environment.ts：

export const environment = { 
    production: false, 
    languageFile: 'assets/languages.json' 
}; 

environment.prod.ts：

export const environment = { 
    production: true, 
    languageFile: 'assets/languages.json' 
}; 

• あなたのJSONファイル言語で持っているものを表すクラスを作成します。JSON exempleについては

：

export class Configuration { 
    languages: string[]; 
} 

• この設定をロードするサービスを作成します。あなたのメインモジュール、通常AppModuleで

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Configuration } from './configuration'; 

@Injectable() 
export class ConfigService { 
    private config: Configuration; 

    constructor(private http: Http) { 
    } 

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

    getConfiguration(): Configuration { 
    return this.config; 
    } 

} 

• を、以下を追加します輸入品：

import { APP_INITIALIZER } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { ConfigService } from './config.service'; 
import { environment } from '../environments/environment'; 

• まだあなたのメインモジュールは、（モジュールの外で）ロード機能を追加します。

あなたのメインモジュールではまだ

export function ConfigLoader(configService: ConfigService) { 
    return() => configService.load(environment.languageFile); 
} 

• は、2次プロバイダを追加します。
を

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

• ConfigServiceを使用して言語を読み込むことができるようになりました。

ここでは、コンポーネント内の例を示します。

@Injectable() 
export class MyComponent { 

    languages: string[]; 

    constructor(private configService: ConfigService) {} 

    ngOnInit() { 
     this.languages = this.configService.getConfiguration().languages; 
    } 
} 

私の場合、アカウントを変更するにはサーバーをリロードする必要があるようです。

はそれに役立つことを願っています:)

PSを：このメッセージでは最終的な英語または技術的なミスのため申し訳ありませんが、

Answer 2

（私は昼休みに迅速にそれを書いた）あなたはrequire()コンパイラは、実際に「インライン」を使用する場合JSONのmain.bundle.js内のファイルとassets

内のファイルを使用しませんが、あなたが必要なもののように思えることは代わりにrequire()