How to set environment variables in Angular

Q I have an angular application that connects to Firebase cloud. How can I set the configuration for firebase cloud as environment variables separately for production, development and testing environments?

A – For creating a new Angular app using Angular CLI, we use the following command

This creates two new  environment.ts files inside Appname/src/environments folder



 .angular-cli.json in the Appname folder will have the following code


Environment.prod.ts will be your environment file for production and environment.ts will be your default environment file.

environment.ts will have the following code

The file contents for the current environment will overwrite these during a build.

If you do

the environment.prod.ts will be used instead.

Adding environment variables

Creating environment files for development and test in src/environments folder

1 environment.test.ts


2 environment.dev.ts

In .angular-cli.json file, add the following code


To run using the environments, use


Import environment  like this


No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *