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.

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…