How to use different Environment Variables in Angular 13
Introduction
In this article we will learn how to use different environments files for different environments.
When we create angular app using cli by default it has 2 environment files one for dev and one for prod.
Sometimes we need to create separate files for different environments e.g. QA, UAT, Staging, Prod etc. when we have separate API URLS for different environment.
Let’s deep dive into this.
Custom environment file
For each target environment, we will create a new environment file under folder environments. For demo, I have created separate environment files for qa and uat environments.
Custom environment settings
You can put your API URL and other settings in custom environment file. For example,
export const environment = {
production: true,
envName: 'UAT',
apiUrl: 'https://uat.endpoint.com'
};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 uat and qa environments.
"uat": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.uat.ts"
}
],
"outputHashing": "all"
}"qa": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
],
"outputHashing": "all"
}
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.
Github
If you liked this please give a clap.
Also let us know who you are doing this in your project. Do share if you know any other approach.