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?

Community · Accepted Answer · 2017-05-23 12:25:42Z

7

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

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Jan 27, 2017 at 14:52

Steve G

13.8k7 gold badges45 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Over a year ago

The Dynamic solution was exactly what I was looking for. Thanks

Collectives™ on Stack Overflow

How do I add build-time environment variables into application with angular-cli?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related