How to Use Environment Variable in Angular?

By Hardik Savani | June 12, 2020 | Category : 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 and angular 11 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...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: