Angular Custom Environments Without Changing the Local Code or Repo.

Vugar Abdullayev
Mar 20 · 3 min read
The more frustrating problem you face in development, the more amazing solution you end up with.

In this article we gonna talk about a scenario when we want to set up our custom environment by neither changing local code nor pushing to repository.

Problem

As you know Angular provides us environment files where we can store our config. But we still fill those files by writing statically our secret keys or settings. What if due to security, we do not want to share our secret keys to repository? Or what if we want our custom settings in environment and still don’t want to push those changes? The first ideal solution comes to mind is to set up environment file which retrieves this config from System Environment variables(.env) like below.

Unfortunately, the above solution simply will not work. Because we are accessing system environment variables via process.env but process.env is available to Node applications, while an Angular application is not.

Solution

We can solve problem of reading system environment variables solution by using dotenv

  1. Install dotenv

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env

2. Create new file(set-env.ts) in root of your Angular applicaiton.

This will let us process system environment variables (.env), create new or replace file called environment.custom.ts (targetPath propety).

Do not forget to setup your environment variables. For example, in Windows to set up MSAL_CLIENT_ID in above example, we run set MSAL_CLIENT_ID="your-id". It can be different in MacOS or Linux.

3. Add environment.custom.ts file to .gitignore in order to exlude our generated environment.custom.ts from being committed to repo.

4. By default Angular provides us two environments ( environment.ts and environment.prod.ts). Now we should let Angular know we have new custom environment file and the way to handle it( for serving ,building, testing). Add this bolded custom entry to angular.json for building (inside architect/build/configurations object)

5. Add custom entry for ng serve (inside architect/serve/configurations object)

6. Add custom entry to e2e (inside architect/e2e/configurations object)

7. Add or modify our code snippet to package.json to process our set-env.ts file.

Here we goo , thats all for the problem. Lets summarize what happens here when we run npm run start.

ts-node will run set-env.tswhich will process our system environment variables and create new file which content will be simply the envConfigFile constant in set-env.ts file. Finally it will run ng serve which will use our new environment.custom.ts file as configuration.Also important, our commit is clean because we exluded our environment.custom.ts from changes.

More info: References 1 , 2 .

That’s all, hope you enjoyed the reading and benefit from it.☕

Follow me on Twitter

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store