时间戳

首页 > 解决方案 > Angular：构建后是否可以读取json文件

angular - Angular：构建后是否可以读取json文件

问题描述

我正在开发一个需要在不同服务器上运行的 Angular 7 项目。我需要从环境文件中读取服务器 URL，并且不能设置为静态变量。

我尝试读取一个 JSON 文件，但是一旦我构建项目，它就会将 JSON 的内容复制为 main.js 中的静态值

构建项目后是否可以动态读取 JSON 文件？就像从 env.json 中读取一样，我可以在构建项目后放入

标签： angular

解决方案

我在 assets 文件夹中创建了一个 setting.json 文件，在 ng build 之后我转到 setting.json 更改后端 url。

export class SettingService  {

  constructor(private http: HttpClient) {

  }

  public getJSON(file): Observable<any> {
      return this.http.get("./assets/configs/" + file + ".json");
  }
  public getSetting(){
      // use setting here
  }
}

在 app 文件夹中，我添加文件夹 configs/setting.json

setting.json 中的内容

{
    "baseUrl": "http://localhost:52555"
}

在应用模块中添加 APP_INITIALIZER

 {
      provide: APP_INITIALIZER,
      useFactory: (setting: SettingService) => function() {return setting.getSetting()},
      deps: [SettingService],
      multi: true
    }

推荐阅读