How To Use Environment Variables in Angular
Table of Contents
Introduction #
If you’re building an app that uses an API, you’ll want to use your API key for testing environments during development and your API key for live environments during production. In Angular, you can create environment variables with the environment.ts
file.
Note: This post applies to Angular 2+ apps.
In this tutorial, you will learn how to use environment variables in Angular.
Prerequisites #
If you would like to follow along with this article, you will need:
A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.
This tutorial was verified with Node v16.2.0, npm
v7.15.1, and @angular/core
v12.0.3.
Detecting the Environment #
Angular CLI projects already use a production
environment variable to enable production mode when in the production environment:
src/main.ts
// ...
if (environment.production) {
enableProdMode();
}
Angular also provides us with an utility function called isDevMode
that makes it possible to check if the app in running in dev mode:
src/app/app.component.ts
import { Component, OnInit, isDevMode } from '@angular/core';
@Component({ ... })
export class AppComponent implements OnInit {
ngOnInit() {
if (isDevMode()) {
console.log('Development!');
} else {
console.log('Production!');
}
}
}
This example code will log out the message 'Development!
in development mode and log out the message Production!
in production mode.
Adding Development and Production Variables #
And you’ll also notice that by default in the /src/environment
folder you have an environment file for development and one for production.
Let’s say we want to use a different key depending on if we’re in development or production mode:
For development settings in environment.ts
:
src/environment/environment.ts
export const environment = {
production: false,
apiKey: 'devKey'
};
For production settings in environment.prod.ts
:
src/environment/environment.prod.ts
export const environment = {
production: true,
apiKey: 'prodKey'
};
And in our component all we have to do in order to access the variable is the following:
src/app/app.component.ts
import { Component } from '@angular/core';
import { environment } from '../environments/environment';
Angular takes care of swapping the environment file for the correct one.
Run development mode with:
ng serve
The apiKey
variable resolves to devKey
.
Run production mode with:
ng serve --configuration=production
Note: Previously, the --prod
option was recommended but this has been deprecated for --configuration=production
.
The apiKey
variable resolves to prodKey
.
Adding Staging Variables #
Add new environments in Angular CLI projects by adding new entries to the configurations
field in the angular.json
file.
Note: Previously, this configuration was set in .angular-cli.json
.
Let’s add a staging environment based on the configuration used by production:
angular.json
{
// ...
"projects": {
"angular-environment-example": {
// ...
"prefix": "app",
"build": {
// ...
"configurations": {
"staging": {
// ...
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.stage.ts"
}
],
// ...
},
// ...
},
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"staging": {
"browserTarget": "angular-environment-example:build:staging"
},
}
},
}
}
}
}
And now we can add a staging environment file:
src/environments/environment.stage.ts
export const environment = {
production: true,
apiKey: 'stagingKey'
};
Run development mode with:
ng serve --configuration=staging
Note: Previously, the --env=staging
option was recommended but this has been replaced with --configuration=staging
.
The apiKey
variable will resolve to stagingKey
.
Conclusion #
In this tutorial, you learned how to use environment variables in Angular.
If you’d like to learn more about Angular, check out our Angular topic page for exercises and programming projects.