How to inject values from a .env file into Angular environment.ts files during development and...

I have an Angular 18 app and need to inject environment variable values from a .env file into my environment.ts file and environment.development.ts. I want the values available during development (ng serve) and builds (ng build).

The builder in my angular.json is @angular/build:application

My example environment TS files look like and my plan is to access .env something like this:

export const environment = {
name: 'production',
key: process.env['MYKEY_PROD']
};


and

export const environment = {
name: 'development',
key: process.env['MYKEY_DEV']
};


and .env file looks like:

MYKEY_DEV=123
MYKEY_PROD=456


I cannot directly do this since it is not supported I think. I get error:

de? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig. [plugin angular-compiler]

src/environments/environment.development.ts:3:9:
3 │ key: process.env['MYKEY_DEV']
╵ ~~~~~~~



I found a Medium article which uses a package @angular-builders/custom-webpack. Here is the demo with custom webpack (manually add the .env file if it is not there). I don't want to use Webpack because new Angular uses Vite. Maybe I can make use of it somehow?

Continue reading...