Configure an Angular App to Support Multiple Environments

Add Multiple Environments to Your Angular App in Easy Steps

Post cover image displaying the Angular logo
Your App, Your Way

In an Angular app there are two different environments by default which are development and production but most of the time we want to build or start our apps in different environments for maybe testing or quality control.

In this post, we will see how to configure the Angular app to support multiple environments.

Table of contents


  • NodeJs

Project Setup

Assuming you have created an Angular project, if not run the followings commands to create a new project.

Open up a terminal and install the Angular CLI globally:

npm i -g @angular/cli

Then create a project:

ng new my-app

The above will create a project named my-app, get into the app and open it with your preferred IDE or text editor.

cd my-app && code .

Project walk-through

Locate and open the angular.json configuration file, it should be at the root of the project.

If we fold the main object keys we will see the following:

The angular.json file folded

Now we will be working under the build key that can be found at:

projects > my-app > architect > build > configurations

Here is the default configurations object:

The angular.json file (configurations entry)

Now you can see the defaults, development, and production, we will be adding one more configuration for the sake of this post but you can always add as many as needed.

Add staging configuration

To make it an easy job to add a configuration just copy the production entry and paste it below the production and name the entry from production to staging and the other important part is to rename the environment file replacement from prod to staging.

The angular.json file (staging configuration entry)

Staging configuration explained

To explain what will happen when we added the above configuration, when we hit:

ng build --prod

We trigger the production build process and if we look closely it uses the development environment.ts file variables with variables, the same thing will happen to the staging configuration it will use with environment.staging.ts.

Now since this is cleared out, let's create the staging environment file, go to environments folder in the src folder and create it there as follows:

Copy and paste the production file's content into it, and now we have the staging environment set up.

What we need is to run the app with that configuration, to do so run the build command while specifying the configuration:

ng serve --prod --configuration staging

And to build the app with the staging configuration:

ng build --prod --configuration staging


Voila, we are using a new configuration with different variables such as the API URL and much more.


As always, I hope you learned something.

Found this useful? feel free to share it with your friends.

Join the newsletter from to notify you of new posts and updates.

Like the post? consider buying us a coffee ❤️.