Environment Variables in Angular

Environment Variables in Angular

• 1.
  Presented By: Devanshu Verma& Amar Environment Variables in Angular
• 2.
  Lack of etiquetteand 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 ToRead 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 Variablesare 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 AngularEnvironment 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 AngularEnvironment 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 CreateEnvironment 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 Readthe 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 EnvironmentVariable 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 ! Getin touch with us: Lorem Studio, Lord Building D4456, LA, USA