Configure and build Angular application for different environments

Balram Chavan

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.

Separating production and development HTTP URLs using environment.ts file in Angular

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