Base configuration

In this example, we are going to use the following configuration:

As you can see here, we are repeating lot of configuration which is common of both environments. It’s very difficult to work in that way, for example, making a mistake changing some value only in one of all environments.

Split and inheritance

To solve this problem, we have to split configuration in several files and use a merge tool to join it.

The merge tool I’ll use in this example is deepMerge, to install it just add to your package.json.

"deepmerge": "^2.1.0"

We are ready to split the configuration following the rules below. We are supposing it’s possible to have several development and production environments.

appVersion and browserSupport are common to all environment, so we put this into a global config file. production depends on what environment we are (dev or prod), so we will create dev.ts and prod.ts files. If we suppose we have one different endpoint for each environment. We’ll put endpoint variable directly in the environment file.

And now we have a more readable, in a hierarchical structure, and easy to maintain configuration.

I would like to clarify this solution has full support with angular cli and works nice with Ahead-Of-Time compilation.

Clap this if you liked it and follow me if you want more exclusive content like this.