How to use environment variable in Angular 16

ZeroesAndOnes
4 min readJul 25, 2023

In this article I will demonstrate to you how to set and access environment variables in Angular 16.

1 — Create an empty Angular Project

First, let’s start off my creating an empty Angular 16 project. To do that open a Terminal in your VScode and type the following command:

> ng new environmentVariablesDemo

and make sure to follow the command prompts. This might take a bit to complete because Angular is going to download its required packages. Below is a link to an article that I have created that will show you how to create an empty Angular 16 project along with all the necessary requirements.

2— Create the basic environments using Angular CLI

Angular CLI provides you the ability to create the environment folder along with a development and prod environment files. To leverage the Angular CLI type the following command in your project terminal:

ng g environments

Once you execute the command, you will notice that a new folder called “environments” is added to the project. Additionally, two environment TypeScript files are added. One for development and the other for production.

Furthermore, if you open the src/angular.json file and look for the development section, you will notice that the following config has been added:

 "fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.development.ts"
}
]

This additional attribute will instruct the Angular project to replace the prod environment file with the development file when the application is served/compiled using development environment.

3— Customise our…

--

--