Angular 9 Get Environment Variables Example

This tutorial is focused on angular 9 environment variables example. i would like to show you angular 9 set environment variable. i would like to share with you angular set env variables. i explained simply step by step angular 9 cli set environment variable.

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 and angular 9 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...