我可以在 ng serve 上将变量传递给 environment.ts 吗？答案

【问题标题】：Can I pass a variable to environment.ts on ng serve?我可以在 ng serve 上将变量传递给 environment.ts 吗？
【发布时间】：2021-10-15 20:22:51
【问题描述】：

我经常使用两种不同的配置在本地运行一个项目。一个带有存根数据，一个连接到 Spring Boot 后端。我可以通过 connectToBackend=true 使用以下逻辑在这些模式之间切换。

// Angular 11, src/environments/environment.ts

import processStubs from '[REDACTED]';
import processBackend from '[REDACTED]';
import { Launcher } from '[REDACTED]';

let connectToBackend = false;

let processLocal;
if (connectToBackend) {
  processLocal = processBackend;
} else {
  processLocal = processStubs;
}

export const environment = {
  process: processLocal,
  launcher: Launcher,
  production: false,
  backendConnection: connectToBackend,
};

如何使connectToBackend 成为服务项目时由命令行设置的动态变量？例如：

ng serve --connectToBackend=true

【问题讨论】：

为什么不把它做成两个环境？
environment.prod.ts 已在使用中。我认为您可以将其添加到 angular.json 中的自定义环境列表中，但我无法使其与“ng serve --...”一起使用。
不清楚你到底做了什么，但如果你遵循例如angular.io/guide/build 应该可以。如果没有，请给minimal reproducible example。这肯定比尝试添加自定义参数更容易。
可以创建其他环境，查看：itnext.io/…angular.io/guide/…
感谢您和 Arutsudar 的以下回答。多环境解决方案是可行的方法，并且现在适用于 ng serve。我错过了 angular.json 中“服务”下的配置。

标签： angular angular-cli

【解决方案1】：

ng serve 命令接受参数configuration。

您可以在 Angular 中拥有多个环境（正如 cmets 中的其他人所建议的那样）。

在angular.json 中，您可以提及可以覆盖默认环境文件的新环境配置。（引用自Link）

"build": {
  "configurations": {
    "production": {
      // ...
    },
    "demo": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.demo.ts"
        }
      ]
    }
  }
}

"serve": {
  "configurations": {
    "production": {
      // ...
    },
    "demo": {
      "browserTarget": "PROJECTNAME:build:demo"
    }
  }
}

创建一个新文件src/environments/environment.demo.ts 来存储backendConnection 变量的值（以及其他必要的变量）

export const environment = {
  process,
  launcher: Launcher,
  production: false,
  backendConnection: true
};

为了运行新环境，你可以使用这样的命令 ng serve -c=demo.

【讨论】：