How do I add build-time environment variables into application with 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'
}