如何更新 .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"
}

推荐答案

看来我现在遇到了完全相同的问题，我使用了本教程:https://aclottan.wordpress.com/2016/12/30/load-configuration-from-external-file/

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 文件保存在assets"文件夹中，使其在 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属性:

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

例如:

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屋！