Angular comes with a mechanism for creating environment specific builds using environment.ts files.

This works well, but the downside is that you’ll need to build the code for each environment. Five environments mean five builds. And if the hosting environment changes, the code needs to be rebuilt.

There is another smart option that uses a json configuration file which can be customized on the fly during deployment. This makes it possible to build a single time and deploy the same build in all environments.

In our Angular application we use a config.json file from which we load the environment specific configurations, such as the backend api url:

We are using Azure DevOps pipelines and have a job that builds the code and publishes it as an artifact. In the deploy job we download the artifact and manipulate the config.json. We use the FileTransform task, which replaces the content of config.json with the variables defined in the YML pipeline.

• The variables to be replaced are defined in the YML pipeline. Example from our production:

• The FileTransform task replaces the content of config.json with the variables defined in the YML pipeline:

The resulting config.json looks like this:

And the request for the config-file: