In this article, we’ll see how to setup environment configuration in Angular application. We often need to setup environment configuration in Angular application when we’ve different environment or stages for of our application.
And different stages uses different environment variable based on the stage. such as development, staging, production etc.
When you create angular application, it’ll generate environment folder which will be containing 2 files as following:
- environment.ts
- environment.prod.ts

You can define different named build configuration for you project, such as staging, production etc.
Angular CLI command will replace that environment variables based on your target environment.
environment.ts
is base configuration file. you can override that configuration in different environment stage. For i’e environment.prod.ts will override the default environement configuration variables when application will be run on production mode.
You can also add a staging environment by adding environment.staging.ts which will override default configuration on a staging environment.
Table of Contents
Different Environment Configuration Files
In this example, we’ll see following different environment configuration setup.
- Local
- Staging
- Production
Base Environment Configuration File
environment.ts
The base file environment.ts
, contains the default environment settings
export const environment = {
production: false,
environmentName:'Local',
apiUrl:'https://localhost:1234'
};
Here you can see in the above base configuration file, there are three variables production
, environmentName
and apiUrl
The build command uses this as the build target when no environment is specified.
Now, we’ll create target specific configuration files.
Staging Environment Configuration File
environment.staging.ts
export const environment = {
production: false,
environmentName:'Staging',
apiUrl:'https://staging.my-api-url.com'
};
Production Environment Configuration File
environment.prod.ts
export const environment = {
production: true,
environmentName:'Production',
apiUrl:'https://my-api-url.com'
};
Using Environment Variable in Angular App
Now we’ll see how to use environment variable in angular component.
app.component.ts
import { Component } from '@angular/core';
import { environment } from '../environments/environment';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
env = environment;
}
Here environment
ensures that the build and serve commands can find the configurations for specific build targets.
Here, you might have noticed that we’ve assigned environment
to variable called env
.
That’s because we want to display env
in template file .
Our template file will looks like following:
app.component.html
<div><b>Environment Name: </b>{{env.environmentName}}</div>
<br>
<div><b>Environment API Url: </b>{{env.apiUrl}}</div>
Configure target-specific file replacements
Now if you’ll open angular.json file, you’ll see the following code in the configuration section for each build target.
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
.....
.....
}
If you’ll check the above highlighted code, you’ll notice fileReplacements
array.
It allows us to replace any file with a target-specific version of that file.
This means that when you build your production configuration using ng build --prod
or ng build --configuration=production
), the src/environments/environment.ts
file is replaced with the target-specific version of the file, src/environments/environment.prod.ts
.
Now we’ll add staging environment configuration in angular.json file as following
"configurations": {
"production": { ... }
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
.....
.....
}
You can add more configuration options to this target environment as well i.e optimization, outputHashing, aot etc.
Any option that your build supports can be overridden in a build target configuration.
Run the following command if you want to build you application using staging environment
ng build --configuration=staging
You can also configure the serve command to use the targeted build configuration.
To achieve it, you’ll need to add it to the “serve:configurations” section of angular.json
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular-env-sample:build"
},
"configurations": {
"production": {
"browserTarget": "angular-env-sample:build:production"
},
"staging": {
"browserTarget": "angular-env-sample:build:staging"
}
}
}
Run the application
Run as Local Environment
Now run the application using ng serve, it’ll use base configuration file(environment.ts
)
ng serve
Output

Run as Staging Environment
ng serve --configuration=staging
Output

Run as Production Environment
ng serve --prod
or
ng serve --configuration=production
Output

That’s it. You’ve configured environment successfully.
I hope you like this Angular Environment Configuration article.
Also Read:
- Integrate CKEditor(rich text editor) in Angular
- How to check Angular CLI version and how to update it.
- Different ways to install bootstrap 4 in angular application
- How to define global constants(variables) in angular