我如何配置Angular以在开发模式下使用但使用选定的生产环境变量？

Question

我处于项目开发的早期阶段，并且经常在使用本地开发后端服务与使用实际生产版本（在我的开发角度环境中）之间来回切换。

所以我基本上是在代码中的注释行之间来回切换：

service.ts

this.http.post(
  'http://127.0.0.1:port/endpoint',
  //'https://production-server.com/endpoint',
  // ...

我刚刚升级为正确使用environment.ts和environment.prod.ts文件

environment.ts

export const environment = {
  production: false,
  backendServiceEndpoint: 'http://127.0.0.1:port/endpoint',
  // bunch of other dev config stuff
};

environment.prod.ts

export const environment = {
  production: false,
  backendServiceEndpoint: 'https://production-server.com/endpoint',
  // bunch of other production config stuff
};

所以现在我的代码实际上看起来像：

service.ts

this.http.post(
  environment.backendServiceEndpoint
  // ...

因此，对于“大量其他配置资料”，这是一个非常有用的更改。但是我仍然想在有角度的开发模式下测试生产后端。我知道我可以使用ng serve --prod来获取environment.prod配置，但是我不希望所有内容都切换为backendServiceEndpoint。实现这一目标的最佳模式/方法是什么？

我以为理想的方法是在ng serve命令上添加一些我可以添加的自定义标志，但我认为我不可能做到这一点。

添加的上下文：这实际上是一个离子项目。所以我真的在用ionic serve

Answer 1

angular build docs中列出了几个选项

我推荐的方法是使用proxy.conf.json文件代理所有请求。您可以通过如何调用serve命令来进行替换。

ng serve --proxy-config proxy.conf.json

示例代理文件：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "logLevel": "debug"
  }
}

这将重写路径中的api，但取决于您的用例。

Answer 2

您想使用ng serve --configuration=<your env name>并将其连接到angular.json文件中的“配置”下。

参见：https://angular.io/guide/build#configure-target-specific-file-replacements

如果您的配置很复杂，并且需要根据其他变量进行更改，我将使用配置“服务”。我使用HttpClient使用情况和用户有权获得的权限来动态设置/更改内容。

[C0的副本]