如何更新 .json 文件而不在 Angular cli 中重建？

Posted 2023-02-22

【中文标题】如何更新 .json 文件而不在 Angular cli 中重建？

【英文标题】：How to update .json file without rebuilding in angular cli?

【发布时间】：2017-09-24 21:46:02

【问题描述】：

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

我导入了一个定义在 angular-cli.json 中的languages.json 文件：

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

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

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

加载 json 文件有效。部署后，我尝试更改（添加或删除）languages.json 中的某些语言，但即使在 dist 中更新了 json 文件，更改也不会显示在网站中。我可以更新网站的唯一方法是更改​​原始 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"

【问题讨论】：

如何更新文件？

【参考方案1】：

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

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

如果是这样，这里我所做的，适用于你的例子：

将您的

languages.json

文件保存在“assets”文件夹中，以使其在 dist 文件夹中可用。

在这个演示中，我将以此为例：

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

在环境文件（environments.ts 和environments.prod.ts）中添加一个

languageFile

属性，指向languages.json：

环境.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 加载语言了。

这里是组件中的一个示例。

@Injectable()
export class MyComponent 

    languages: string[];

    constructor(private configService: ConfigService) 

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

在我的情况下，我似乎必须重新加载服务器才能修改帐户。

希望它会有所帮助:)

PS : 对于此消息中最终的英语或技术错误，我深表歉意（我在午餐时间快速写了它）

【参考方案2】：

当您使用require() 时，编译器实际上会“内联”main.bundle.js 中的 JSON 文件，并且不会使用 assets 中的文件

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