Angular 6 — Compile Time vs Run Time Environments

In today’s world, every application either its a back-end or a front-end, ought to have different stages of a project. Unless you are working on a POC. You need a streamlined version controlling system. This starts right from Git or TFS (the most popular version controls out there in the wild).

You need to setup multiple branches for your DEV, QA, UAT and PROD environments to manage your code structure for each state. In the same essence, we need to make builds for these states as well. But how can you make sure that with minimum effort, you can prepare your builds and separate-out configurations for each of the environments?

For this in angular 6, we have environment files out of the box. This feature is coming from angular 5 but with much improvements thanks to angular.json file.

By default angular 6 project is instantiated with environment.ts & environment.prod.ts

Compile-Time Environments

By default the project is setup with two environment files. environment.ts & environment.prod.ts . If we open one of the file, you can find this instruction.

The file contents for the current environment will overwrite these during build. The build system defaults to the dev environment which uses `environment.ts`, but if you do

`ng build — configuration=prod` then `environment.prod.ts` will be used instead.

The list of which env maps to which file can be found in `angular.json`.

This means, whichever configuration you choose from cli, eventually your environment.ts will be overridden. So first thing, declare environments in your project like below.

Here you can see we have same json for dev and prod environments, but with different values.

To use this, import it like you regularly do;

after import, you can consume your static variable where required.

And to build your project, you’ll use below commands

ng build

ng build — prod — aot — output-path \”.\\dist\\prod\”

ng build will pick, environment.ts whereas, ng build — prod will pick the environment.prod.ts respectively.

Let’s add 3rd environment in addition to “dev” and “prod”, i.e. qa

For this, add a new environment.qa.ts file in environments directory.

we updated the appRoot to point to qa-api server

To add configuration for qa, open angular.json and add “qa” json, below “production”, like shown in the image below and save it.

You have a new configuration with key “qa”

Now to make this build, use below command;

ng build — configuration=qa — output-path \”.\\dist\\qa\”

This will generate build in the /dist/qa directory. Similarly, you can make other environments to your needs.

Run-Time Environments

In some scenarios, you might want to update your configuration based on the json file. Which you could add in your project. And without rebuilding project each time with new parameters. You could just add/update keys in the json file and your app responds to these changes.

For this you need a mechanism to first load your configuration file and then allow your application to bootstrap. To do this lets follow steps below;

Add a new file appConfig.json in your assets directory

After adding the json file, add your desired configuration keys and their values and save it. After this, open your app.component — which is the entry level component of any angular app. Add below code snippet.

A flag to check if configurations are loaded from our json file and a loading bar section, in case your app is taking time to load file.

Trick is to show progress-bar until our configurations are loaded. Once it’s loaded, we’ll hide the progress-bar and show our router-outlet with other header, footer components.

Let’s open our app.component.ts file and place below code;

Let’s have a look at this. The above piece of code, declares a configuration flag to show/hide progress-bar and appConfig.json path.

OnInit we are making an http client call to fetch data from config file. Once the file is found, we override our default values in function overrideStaticConfigurations and toggle the flag to show our app component. In case, we are missing the file, we handle the error gracefully by writing a warning in console and use our static configurations, which are saved in environment.ts file.

For demonstration purpose, I have added 5 seconds delay, in your production apps you should remove this.

Let’s save and run our application. You’ll be greeted by loading message and then switched to the home screen after 5 seconds.

environment object, overridden by run-time configuration file - printed in console

To check, if your compile-time settings were there already, remove/rename the json file in assets directory and save. Reload the app and check console window.

rename or remove the file to load compile-time configurations

There you have it! Compile-time & Run-Time configurations in your angular 6 app.

PS — The source-code is available at github.

Checkout feature-runtime-configurations branch for this change-set.