Question

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

用例：

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

gulp-replace

然后，您可以使用const GIT_VERSION = "{GIT_VERSION}";将其添加到应用程序中：

const GIT_VERSION = "59e5722";

最后，编译的应用程序看起来像：

        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

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

Answer 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'
}

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

1 个答案: