How to pass environment variables at building time in an Angular application using .env files

Let’s share environment variables between Front End and Back end and pass them to and Angular application.

I really like the environment variables setup with the Angular CLI. One problem though is that sometime I need to pass to the app some keys or maybe some links that I do not want to commit on the repository (inside the environments.ts files, even if the repo is private). This is due to many reasons:

• for example, I want to develop an application or a module as generalist as possible to be reusable in other projects,
• or maybe I have some sensible details that I want to keep as difficult to find as I can, from the final users,
• or I can have a cloud system (Heroku, AWS, etc…) that is set up with different environments (development, testing, staging, production) that are set up differently and in these settings there are keys or details that can change frequently (something like…