如何在不在 angular cli 中重建的情况下更新 .json 文件？

Question

我正在使用 angular cli 构建一个包含多种语言的网站。我使用 ng2-translate 进行翻译。

我导入一个 languages.json 文件定义在 angular-cli.json:

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

在我的控制器中，我使用 require:

检索数据

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/

如果我理解得很好，您需要有一个 "external" 变量，您可以修改该变量而无需更改应用程序代码并重新构建？

如果是这样，这里是我所做的，应用于您的示例：

将 languages.json 文件保存在 "assets" 文件夹中，以便在 dist 文件夹中可用。

在此演示中，我将使用它作为示例：

{
  "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'
};

创建一个 class 代表您在 JSON 文件中的内容 languages.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() 时，编译器实际上会 "inline" main.bundle.js 中的 JSON 文件，而不会使用 assets[= 中的文件14=]

看来您需要的是使用 http 服务来检索 JSON 文件，而不是使用 require()

如何在不在 angular cli 中重建的情况下更新 .json 文件？

How to update .json file without rebuilding in angular cli?

javascript

json

angular

angular-cli

ng2-translate