如何更新.json文件而無需在角度cli中重建？

Question

我使用角度cli來構建一個包含多種語言的網站。我使用ng2-translate進行翻譯。

我導入角cli.json定義的languages.json文件：

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

在我的控制，我使用需要數據檢索：

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

加載JSON文件作品。部署完成後，我嘗試更改（添加或刪除）languages.json中的某些語言，但即使json文件在dist中更新，也不會在網站中顯示這些更改。我可以更新網站的唯一方法是更改​​原始的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/

如果我理解不錯，你需要的是有一個您可以修改「外部」變量而無需更改應用程序代碼並重建？

如果是的話，在這裏我做什麼，應用到您的爲例：

• 讓您languages.json文件中的「資產」文件夾，使其在蒸餾水文件夾中。

在這個演示中，我將使用此爲例：

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

• 在環境文件添加languageFile財產（environments.ts和environments.prod.ts）指向languages.json ：

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

對於爲例：

export class Configuration { 
    languages: string[]; 
} 

• 創建將加載此配置的服務：

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; 
    } 

} 

• 在你的主模塊，通常的AppModule，添加以下進口：

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()編譯器會實際上是「內聯」的在main.bundle.js JSON文件，並在assets

不會使用該文件好像你需要的是使用HTTP服務來檢索，而不是使用require()