如何使用 angular-cli 将构建时环境变量添加到应用程序中？答案

【问题标题】：How do I add build-time environment variables into application with angular-cli?如何使用 angular-cli 将构建时环境变量添加到应用程序中？
【发布时间】：2017-01-27 13:56:37
【问题描述】：

有没有办法在构建时评估某些内容，然后在 angular-cli 构建过程中将其添加到应用程序中？

用例：

我之前使用 gulp 构建了一个应用程序。您可以执行以下操作：

 git rev-parse --short HEAD

然后，您可以使用gulp-replace 将其添加到应用程序中：

const GIT_VERSION = "{GIT_VERSION}";

最后，编译后的应用程序如下所示：

const GIT_VERSION = "59e5722";

angular-cli 是否提供了一些东西来实现这一点而不必恢复到 gulp？

【问题讨论】：

标签： angular gulp angular-cli

【解决方案1】：

如果我正确理解了您的问题，您是否查看过 Angular2 CLI 的 environment 文件？

ng build 可以同时指定构建目标（--target=production 或 --target=development) 和用于该构建的环境文件（--environment=dev 或 --environment=prod）。默认情况下，使用开发构建目标和环境。

用于确定使用哪个环境文件的映射可以是在 angular-cli.json 中找到：
"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

静态解决方案

使用您在每个文件中所需的值修改这些文件将在构建时将它们合并到每个相应的构建中。

例如，environment.dev.ts 可能如下所示：

export const environment = {
  production: false,
  apiUrl: 'http://dev-api.mysite.com/v1/',
  loggingEnabled: true,
  environmentName: 'Development'
};

动态解决方案

如果您正在寻找更强大/更动态的东西，您可以使用像 replace-in-file 这样的插件，结合环境文件，最好在 How to insert a Build Number or Timestamp at build time in AngularCLI 和 Volodymyr Bilyachat 的博客中接受的答案中描述发布Angular 2 - Manage application version，这将允许以下内容：

export const environment = {
  production: false,
  version: '{BUILD_VERSION}',
  apiUrl: 'http://dev-api.mysite.com/v1/',
  loggingEnabled: true,
  environmentName: 'Development'
}

【讨论】：

动态解决方案正是我想要的。谢谢