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.
How to start a new Angular 16 Project in few easy steps
In order to successfully create and run an Angular 16 project locally the following three software must be installed on…
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:
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.