How to Use Environment Variable in Angular?

Hi Dev,

In this tutorial we will go over the demonstration of how to set environment variable in angular. i would like to show you how to access environment variables in angular. i explained simply about angular environment variables example. i would like to show you angular set environment variable. follow bellow step for angular set env variables.

Environment Variable will helps you to define your static variable in your application and it will different value of variable our app will run on live and local.

Here, i will show you how to set and use environment variable variable. angular provide environments to configure variables for local, staging and production. angular predefine environment configuration we can use to local and production variable dynamically. i will show you if you want to add more environment file for dev for configuration.

You need to follow this tutorial to show how to set environment variables in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application.

Step 1: Install Angular App

Here, we will simply create new angular application using bellow ng command:

ng new appEnv

Step 2: Create Environment File

Now you can see on your angular app there is a "environments" folder with default set following files. here we will add new environment file for "dev" as like bellow:

src/environments/environment.ts

export const environment = {
  production: false,
  title: 'Local Environment Heading',
  apiURL: 'http://localhost:8000'
};

src/environments/environment.prod.ts

export const environment = {
  production: true,
  title: 'Production Environment Heading',
  apiURL: 'https://apiexample.com'
};

src/environments/environment.dev.ts

export const environment = {
  production: false,
  title: 'Dev Environment Heading',
  apiURL: 'http://dev.example.com'
};

Step 3: Configure Environment Files

After creating environment file we need to configure in angular.json file. we will add dev environment, so let's do it as following:

angular.json

...
"configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      ....
    },
    "dev": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.dev.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ]
    }
  }
....
....
"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "appEnv:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "appEnv:build:production"
        },
        "dev": {
          "browserTarget": "appEnv:build:dev"
        }
      }
    }
....
....
"e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js",
        "devServerTarget": "appEnv:serve"
      },
      "configurations": {
        "production": {
          "devServerTarget": "appEnv:serve:production"
        },
        "dev": {
          "devServerTarget": "appEnv:serve:dev"
        }
      }
    }
....
....

Step 4: Use Environment Variable

now, we will just use our environment variable in our component and run app with local, dev and production configuration.

src/app/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 {
  title = environment.title;
  apiURL = environment.apiURL;
}

src/app/app.component.html

<h1>{{ title }}</h1>
<p>{{ apiURL }}</p>

Step 5: Run App with Environment

Now, we will run our app using three environment with default, dev and production. you can run as bellow and see preview of output:

Run Default Environment:

ng serve

Run Production Environment:

ng serve --configuration=production

Run Dev Environment:

ng serve --configuration=dev

You can also build with following command:

ng build
ng build --configuration=production
ng build --configuration=dev

I hope it can help you...