In this knolx we are going to learn about what, where and how for environment variables in angular and at the end we will go through the demo to have a more clearer picture of angular environment variables.

1. Presented By:
Devanshu Verma & Amar
Environment Variables
in Angular

2. Lack of etiquette and manners is a huge turn off.
Session Etiquettes
Punctuality
Respect session timings, you
are requested not to join
sessions after a 5 minutes
threshold post the session
start time.
Feedback
Make sure to submit a
constructive feedback for all
sessions as it is very helpful
for the presenter.
Silent Mode
Keep your mobile devices in
silent mode, feel free to
move out of session in case
you need to attend an
urgent call.
Avoid Disturbance
Avoid unwanted chit chat
during the session.

3. Our Agenda
02
01
03
How To Read the Environment Variables
04
Where is Angular Environment Variables
How to Create Environment Variables
Introduction
05
Configuration of angular.json
06
Testing the Environment Variable
07 Demo

4. INTRODUCTION
● Environment Variables are those variables, whose value
changes as per the environment we are in.
● Development, testing, staging and production are the
stages of product development. We call these stages as
environment
● 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.

5. Where is Angular Environment Variables
Angular provides build-in support to configure and manage Environment Variables.
It keeps the environment configuration under the folder src/environments folder.

6. Where is Angular Environment Variables…
As we can see above folder contains two files one is environment.ts and the other one is
environment.prod.ts If we open the above files the we will be able to see the following code.
// environment.ts
export const environment = {
production: false
};
// environment.prod.ts
export const environment = {
production: true
};
The above file contains only one variable i.e., production, which is true in environment.prod.ts
and false in environment.ts.

7. How to Create Environment Variables
Creating an environment variable is very simple we just need to add new environment in all
the environment files.
For Example we want a variable environment_name which gives is the name of the current
environment the we just need to add this variable to each and every environment files as
shown below
// environment.ts
export const environments = {
production: false,
environment_name :
'local/development'
}
// environment.prod.ts
export class environments = {
production: true,
environment_name :
'production'
}

8. How To Read the Environment Variable
● Now that we have our new Environment
Variables in place. We must be wondering how
we are going to read those variables in our app
and use them.
● So to use our environment variables we need to
import the default environment file in our
component like : import {environment} from
'../environments/environment';
NOTE : We don’t have to import any other file
environment.prod.ts in our component. We just
need to import the default environment file.
export class AppComponent implements OnInit
{
currentEnvironment !: string;
constructor() {
this.currentEnvironment =
environment.environment_name;
}
ngOnInit() {
console.log('Current Environment is
', this.currentEnvironment);
}
}

9. Testing the Environment Variable
Now when we have created our environment variable and also imported and used it it our application, it's time to
test whether our environment variables are actually working or not. For testing we will be using ng serve command
with different configuration and we will be able to see the console having different output in different configs.
ng serve
ng serve --configuration="production"
The above command will console Current Environment is local/development since by default it uses development
for serving the app.
The above command will console Current Environment is production.

10. Configuration of angular.json
● We need to configure or angular.json to let
angular know on which configuration which
environment it needs to pick and replace.
● angular.json initially holds two configuration -
○ production
○ development
● In production environment with the help of config
angular knows that i need to replace
environment.ts with environment.prod.ts
● In development environment, environment.ts will
be replaced by environment.stag.ts

11. DEMO

12. Resources
● https://angular.io/guide/build
● https://blog.knoldus.com/environment-variables-in-angular-part-
1/#where-is-angular-environment-variables

13. Thank You !
Get in touch with us:
Lorem Studio, Lord Building
D4456, LA, USA