Using .env to store environment variables in Angular.

Have you ever worked on an angular project with API keys and you don’t want to store/save/keep the API keys in the custom environment variables?

you might have different reasons, but the basic use case is always because you want to eliminate the risk of exposing such keys to your git repository

There are many advantages and reason why you want to use this approach, but I would not dwell on that, because if you find yourself reading this, you already know the benefits, and are in need of this approach.

Enough talk, now lets get you started, this article assumes you already have an existing angular project. And as such this article will follow a reverse order approach, meaning that we would work our way from the end result.

What is the end result? The end result is we want to be able to write a code like this:

STEP 1: Modify your app.component.ts

and read the values from the process environment into our angular app

What is process.env? The process. env global variable is injected by the Node at runtime for your application to use and it represents the state of the system environment your application is in when it starts. For example, if the system has a PATH variable set, this will be made accessible to you through process. env.

If you run the code snippet above, you will most likely run into a compilation error, because by default angular doesn’t understand what process.env means, to get rid of the compilation error we need to install a package

STEP 2: Install @types/node

then we need to modify our tsconfig.app.json file like below, so that angular understands the nodejs code “process.env”

STEP 3: Modify your tsconfig.app.json

Now when we run “ng serve”, our application no longer runs into compilation error, but we still have a run time error as value can’t be read from undefined, to fix this we need to install some more packages

STEP 4: Install @angular-builders/custom-webpack and dotenv-webpack

STEP 5: Modify your angular.json

then we need to modify the angular.json file, locate the projects.architect.build and modify the value of the builder as shown below, you also need to add the options property and value

then locate the projects.architect.serve and modify the value of the builder as shown below

STEP 6: Create custom-webpack.config.ts file

next up we need to create the custom-webpack.config.ts file in our src folder

STEP 7: Create .env file

create .env file in your root folder, you can add all the variables you want to declare in the following format. this file holds the value of our process environment variables

STEP 8: add .env to your .gitignore file

add .env to your .gitignore file

now you need to restart your node server using control c and then run “ng serve” again

BONUS:

You can use the process.env in your environment.prod.ts or environment.ts as shown below

then your app.component.ts will look like this

storing secrets on the app itself in repository is a very bad practice. so it doesn’t matter if it’s frontend or backend app. your app secret shouldn’t be expose to the public by all means. That’s why must of the hosting services have where u can set you env vars without them getting expose or you using some of the services such as vault etc for secret management