如何使用angular-cli將構建時環境變量添加到應用程序中？

Question

有沒有辦法在構建時評估某些內容，然后在angular-cli構建過程中將其添加到應用程序中？

使用案例：

我以前用gulp構建了一個應用程序。 您可以執行以下操作：

 git rev-parse --short HEAD

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

const GIT_VERSION = "{GIT_VERSION}";

最后，編譯的應用程序看起來像：

const GIT_VERSION = "59e5722";

angular-cli是否提供了一些東西來實現這一點，而不必恢復吞咽？

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

動態解決方案

如果你正在尋找一些更強大/動態的東西，你可以使用像文件替換這樣的插件，結合環境文件， 在構建時如何插入構建號或時間戳的接受答案中有最好的描述。 在AngularCLI和Volodymyr Bilyachat的博客文章Angular 2 - 管理應用程序版本 ，它將允許以下內容：

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