如何为 Angular 构建提供变量？

Question

通常 Angular 在构建时从 environment.[env].ts 文件接收其环境设置。但是，在某些情况下，我需要能够在构建时根据传递给构建命令的任意参数（如

apiUrl

或

connectionString

）覆盖这些设置。例如：

npm run build --apiUrl=xxx connectionString=yyy

有办法做到这一点吗？

我需要此功能的原因是我用来创建 Azure 静态 Web 应用程序的 Azure ARM 模板...只能控制相关 github 中生成的“自定义构建命令” “动作”CI/CD 脚本。因为我可以控制自定义构建命令……那将成为我传递自定义/环境参数的唯一机会。

Answer 1

你可以做的是创建一个单独的环境文件，如“environment.custom.ts”，并在“angular.json”文件中的配置对象中提及一个新配置，即“custom”，如下所示：

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

现在在“environment.custom.ts”中你可以提到如下属性：

export const environment = {
  production: false,
  apiUrl : "",
  connectionString:""
}

现在在构建时使用以下命令：

npm run ng build -- --configuration=custom