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

Question

Is there a way to evaluate something at build time, and then add it to the application during an angular-cli build process?

Use case:

I was previously building an application with gulp. You could execute something like:

 git rev-parse --short HEAD

And then, you could use gulp-replace to add it into the application:

const GIT_VERSION = "{GIT_VERSION}";

And finally, the compiled application would look like:

const GIT_VERSION = "59e5722";

Does angular-cli provide something to achieve this without having to revert to gulp?

Answer 1

If I'm understanding your question correctly, have you looked into Angular2 CLI's environment files?

ng build can specify both a build target ( --target=production or --target=development ) and an environment file to be used with that build ( --environment=dev or - -environment=prod ). By default, the development build target and environment are used.

The mapping used to determine which environment file is used can be found in angular-cli.json:

 "environments": { "source": "environments/environment.ts", "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } 

Static Solution

Modifying these files with the values you needed in each will incorporate them into each respective build, at build-time.

For example, an environment.dev.ts might look like this:

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

Dynamic Solution

If you're looking for something a little more robust/dynamic you can use a plugin like replace-in-file , in conjunction with the environment files, best described in the accepted answer of How to insert a Build Number or Timestamp at build time in AngularCLI and Volodymyr Bilyachat 's blog post Angular 2 - Manage application version which would allow something along the lines of:

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