Published: February 23 2023

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 ( 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

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

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

Example Angular environment config

Path: /src/environments/environment.ts

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

Path: /src/app/app.component.ts

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

Path: /src/app/app.component.html

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>


Need Some Angular Help?

Search fiverr for freelance Angular developers.

Follow me for updates

On Twitter or RSS.

When I'm not coding...

Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!


Supported by