How to use environment variable in Angular application

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


ng serve --configuration=production

Output

That’s it. You’ve configured environment successfully.

I hope you like this Angular Environment Configuration article.