Introduction
Environment Variables are those variables, whose value changes as per the environment we are in. This will help us to change some behavior of the App based on the environment.
As we all know there are majorly three stages through which an application goes through before going into production. Namely thoes stages are development, testing, staging and production. We call these stages as Environments. And we have different sets of configuration and setups in these environments.
For Example while we build our app for production, we need our app to be optimised and minified. Also we don’t want our users to see any kind of debugging information as they are of no use for them but while in development. We need those debugging informations and logs so that we can eliminate most of the errors during development. So, in this case we have the same application but we need two different configurations and here comes the role of Environment Variables in Angular.
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.
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 followinf 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.
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'
}
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.
We have to read the values as shown below :
export class AppComponent implements OnInit {
currentEnvironment !: string;
constructor() {
this.currentEnvironment = environment.environment_name;
}
ngOnInit() {
console.log('Current Environment is ', this.currentEnvironment);
}
}
Testing the Environment Variable
Now when we have created our environment variable and also imported and used it it our application, its 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
The above command will console Current Environment is local/development since by default it uses development for serving the app.
ng serve --configuration="production"
The above command will console Current Environment is production.
Conclusion
In this blog we learned what is Angular Environment Variable is and how to add a new environment variable. And read it in our Angular App. In our next blog we will see how come angular knows about switching between environment and we will also be building our own configuration.
