Configure and build Angular application for different environments

By default Angular application can be built to development environment or to production environment. Based on target environment, your application might have different setup. For example, API URL to fetch data from server.

Production mode:

You can build your application in production mode by running command:

ng build --prod

When application is built for production mode then environments/environment.ts file gets replaced with environments/environment.prod.ts file. Hence if you are referring to settings from environment.ts file in your code, you don’t have to put any if condition or hard code production URL.

You can find detailed information how to separate production URL in my other blog.

What about custom environment modes?

Generally an enterprise level/big application(s) contains different target environments like QA, Staging, Release etc. And for each environment they would like to have different API URL and other settings like token etc.

You can configure your ng build command to pick your target environment with specific settings. In this story, we will see how to do that.

Create a custom environment target

Custom environment file

For each target environment, you should create a new file under folder environments. For demo, I have created separate environment files for qa and staging environments.

Custom environment settings

You can put your API URL and other settings in custom environment file. For example,

Use environment settings inside components

Your feature components/services can now use normal environment.ts file for referring settings like API URL etc. YOU SHOULD NOT REFER TARGET ENVIRONMENT FILE INSIDE COMPONENT.

Here is an example,

Update angular.json configuration

In your Angular project, you shall find angular.json file. Inside this file, you can add a new section under projects/architect/build section.

Here is an example with qa and staging environments.

I have kept only fileReplacements section in this gist to avoid confusion. fileReplacements settings tells ng cli which file to use for replacing environments/environment.ts file.

Build application for custom environment

Once your configuration is done, you can build your application for targeted environment by specific --configuration parameter to ng build command. For example, to build application in QA mode, run command

ng build --configuration qa

and dist folder shall contains build output with qa configuration. You can publish your website on your target environment now! Hurray!!!

GitHub example:

You can find example source code here:

Cheers!!!

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store