如何更新.json文件而无需在Angular CLI中重建? [英] How to update .json file without rebuilding in angular cli?

问题描述

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

I'm using angular cli to build a website which contains multiple languages. I use ng2-translate for the translations.

我导入在angular-cli.json中定义的languages.json文件:

I import a languages.json file defined in angular-cli.json:

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

在我的控制器中，我使用require检索数据:

In my controller, I retrieve the data using require:

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

加载json文件有效.部署后，我尝试更改(添加或删除)languages.json中的某些语言，但是即使json文件已在dist中更新，更改也不会显示在网站上.我可以更新网站的唯一方法是更改​​原始json文件，再构建应用程序的另一版本并再次部署.是否可以通过仅更新dist中的json文件来更改网站?

Loading the json file works. After deploying, I tried to change (add or remove) some languages in the languages.json, but the changes does not get shown in the website even though the json file is updated in dist. The only way I could update the website is by changing the original json file, making another build of the app and deploy again. Is there a way to make a change in the website by only updating the json file in dist?

为澄清起见，languages.json包含语言代码数组，这些语言代码定义了网站的语言选择器中显示的语言.我希望可以使用此配置来更改网站中显示的语言，而无需重建应用程序.

For clarification, languages.json contains an array of language codes, which defines the languages shown in the language selector of the website. I hoped to use this config to change the languages shown in the website without rebuilding the app.

这是我的package.json:

Here is my 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"
}

推荐答案

看来我现在有完全相同的问题，并且我使用了本教程:

It seems I have exactly the same issue right now and I used this tutorial : https://aclottan.wordpress.com/2016/12/30/load-configuration-from-external-file/

如果我理解得很好，您需要有一个外部"变量，您可以在不更改应用程序代码和重新构建的情况下对其进行修改?

If I understand well, your need is to have an "external" variable you can modify without having to change app code and rebuild ?

如果是的话，这就是我所做的，适用于您的示例:

If so, here what I did, applied to your exemple :

• 将您的 languages.json 文件保留在资产"文件夹中，以使其在dist文件夹中可用.

• Keep your languages.json file in "assets" folder to make it available in dist folder.

在此演示中，我将以此为例:

In this demo i will use this for exemple :

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

• 在指向languages.json的环境文件(environments.ts和environments.prod.ts)中添加 languageFile 属性:
• Add a languageFile property in environment files (environments.ts and environments.prod.ts) pointing to 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文件 languages.json
中拥有的类的类
• Create a class that represent what you have in your JSON file 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加载语言.

以下是组件中的一个示例.

Here an exemple in a component.

@Injectable()
export class MyComponent {

    languages: string[];

    constructor(private configService: ConfigService) {}

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

就我而言，似乎我必须重新加载服务器才能进行帐户修改.

In my case, it seems that I have to reload the server to take in account modification.

希望它会有所帮助:)

PS:对于此消息中最终的英语或技术错误(我在午餐时间很快写完了)表示歉意

PS : sorry for eventual english or technical mistakes in this message (I wrote it quickly during lunchtime)

这篇关于如何更新.json文件而无需在Angular CLI中重建?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！