Chris Mendez in For Developers, Angular

Using Dotenv with Angular 2 (or 4)

Most Node developers use dotenv as a way to manage private API keys. It's especially useful if you're working on a Public Github repo and you don't want to share access to your Firebase, Google, etc. accounts.

While developing an app using Angular 2 and Angular Cli, I discovered that it's not very easy to integrate the dotenv package and after a few hours searching for a workaround, I found a process that works well enough.

The best part of this process is that I don't need to install dotenv at all. Here's how:

Step 1 - Create an Angular 2 app

Using the Angular Cli create a new app.

ng new name-of-app  

Step 2 - Create an .env file

In this example, I am placing the .env file in the /environments folder. This is normally where you store environmental variables for Angular.

vi ./name-of-app/src/app/environments/.env  

Your .env file will resemble /environments/environment.ts.

export const environment = {  
  production: false,
  GOOGLE_MAPS_API_KEY: "XXXXXXXXX",
  FIREBASE_CONFIG:  {
    apiKey: "xxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx"
  }
};

Step 3 - Modify .angular-cli.json

Modify this file to include a new environment called "local" and point it to the .env file.

...
"environments": {
  "dev": "environments/environment.ts",
  "local": "environments/.env",
  "prod": "environments/environment.prod.ts"
}
...

Step 4 - Run Angular locally

The final step is to run ng serve but change the environmental to local.

ng serve --env=local  

Step 5 - Access variables

Open up app.module.ts and try to access your environmental variables. You're done!

console.log(environment.FIREBASE_CONFIG, environment["GOOGLE_MAPS_API_KEY"]);

Resources