Angular2- Environment Specific Configuration

Angular2 makes development and release workflows a lot easier than other javascript frameworks. One such ease is the ease of environment specific settings and configuration. In this post, we are going to see how we can keep environment specific configurations in an angular2 application developed using Angular CLI. We will be using the project we have been building so far. You can download all source code from GitHub.

In order to support environment configuration, Angular2 provides environment.ts file in the app folder. Here we can have all the configurations we want.

There are also environment specific configurations in config folder. Here we have two different files environment.dev.ts and environment.prod.ts for dev and prod environments respectively. In these configs, we can do environment specific overrides of our choice.

env configs

Of course, we can still build the project using ng’s build command.

(default) ng b

Building the project, generates the finalized environment.js file for a particular environment. By default, it uses dev environment.

envionrment.js

In order to use prod’s environment configuration file, we can just use –environment=prod. Running the build with just [ng build –prod] should also have the same effect.

(prod) ng build

We can verify that correct config values are generated. The difference is that they get generated in main.js file instead of environment.js file.

mainjs for env=prod

Using Environment Configs

And we can definitely use it in our template file.

Just make sure that you run it again with ng serve -prod.