How to set environment variables in Angular

September 1, 2018

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

environment.prod.ts

environment.ts

 .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 *