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.
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
During development of Angular application, we use some mock REST APIs or development specific APIs. Once we are done…
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
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,