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

Question

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

用例：

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

 git rev-parse --short HEAD

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

const GIT_VERSION = "{GIT_VERSION}";

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

const GIT_VERSION = "59e5722";

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

Answer 1

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

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的公认答案中进行描述在 AngularCLI和Volodymyr Bilyachat的博客文章Angular 2 - 管理应用程序版本中，这将允许以下内容：

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