Angular - Access Environment Variables
This is a quick tutorial on how to create and access environment variables in Angular with an environment.ts file.
Angular apps built with the Angular CLI support environment variables out of the box with a couple of files in the /environments folder, one for development (environment.ts) and one for production (environment.prod.ts). So all you need to do is add the variables for each environment to these files.
To generate an Angular project with the Angular CLI run the command ng new <project name>, the CLI is also used to build and serve the application. For more info about the Angular CLI see https://angular.io/cli.
How to build the Angular app for different environments (dev & prod)
By default Angular uses the development environment file (environment.ts) when you build the application with the command ng build.
To build the application with the production environment file run the command ng build --configuration production, the output environment.ts is replaced with the contents from environment.prod.ts.
Angular env variable example on StackBlitz
Here's an example Angular app that outputs a single environment variable to the page.
(See on StackBlitz at https://stackblitz.com/edit/angular-access-environment-variables)
Example Angular environment config
This is the dev environment config file from the example, I added a single variable myAngularEnvVariable to access and display in the app component. The production: false flag is automatically created by the Angular CLI to use on app startup.
Environment config is accessed by importing the environment object into any Angular component with the line import { environment } from '../environments/environment' and accessing properties on the environment object.
export const environment = {
production: false,
myAngularEnvVariable: 'env variable from environment.ts file'
};
Angular App Component
The app component imports the environment object and makes it available to the template via the env property.
import { Component } from '@angular/core';
import { environment } from '../environments/environment';
@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent {
env = environment;
}
App Component Template
The component template simply renders the environment variable myAngularEnvVariable.
<div class="card m-3">
<h5 class="card-header">Angular - Access Environment Variables</h5>
<div class="card-body">
<p><strong>myAngularEnvVariable:</strong> {{env.myAngularEnvVariable}}</p>
</div>
</div>
Need Some Angular Help?
Search fiverr for freelance Angular developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!