首页 > 解决方案 > 如何在 Angular 6 中编辑环境变量而不重建?

问题描述

我通常在environment.ts文件中设置我的 API URL。我必须将相同的构建部署到具有不同 API URL 的多个客户端。目前我在更改环境变量后进行单独的构建。

有没有办法在构建后编辑环境变量,所以我可以为每个客户端提供相同的构建?

标签: angularangular-cli

解决方案


我研究了这个问题,这是我不使用的解决方案environment.ts

我在 json 文件中定义了全局设置。因为如果我们在 ts 文件中定义,如果在生产模式下构建,则不容易找到常量来更改值。

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
    }

通过这种方式,我可以baseUrl更轻松地更改 json 文件中的值。


推荐阅读