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

Question

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?

What's the motivation for wanting to put your variables in .env files rather than environment.ts files? — Matt Kantor
– Matt Kantor, Commented Nov 16 at 13:35
@MattKantor they are stored in an env file in build machine. i dont want to commit it to repository — binga58
– binga58, Commented Nov 16 at 13:40
You could try using a package like read-env-file which doesn't require global Node.js types. I'm not familiar with Angular's build process so am not entirely sure this will work the way you want, but if you try it and it seems legit then I'll type up an answer. — Matt Kantor
– Matt Kantor, Commented Nov 16 at 14:14
@MattKantor it uses fs, path which doesnt support in the browser — binga58
– binga58, Commented Nov 16 at 14:59
If you want to dynamically open the .env file at runtime in the browser then that's not possible without more machinery. How would the .env file get there? You'd have to set up your server to make it available over HTTP. It's also going to be bad from a security standpoint if you have any secrets in there (which is common with .env files). Please edit your question to describe what you want to happen in more detail. — Matt Kantor
– Matt Kantor, Commented Nov 16 at 15:06

gdoura mohamed · Accepted Answer · 2025-11-16 23:03:24Z

1

You can’t use process.env in Angular, it’ s running in the browser so none of the Node stuff exists there (no fs, no runtime .env loading, etc). On Angular v17+ (Vite), env vars only work if they’re added when you build the app.

Just throw your values into .env, .env.development or .env.production with a VITE_ prefix, like:

VITE_MYKEY_PROD=456

Then you grab it in your code with:

import.meta.env.VITE_MYKEY_PROD

That’s basically the whole thing... CI/CD can drop the .env file right before the build, and Vite will replace everything, so you don’t have to push any of that into git !
Kinda annoying at first but it works fine once setup.

Docs if you need the full stuff: https://vite.dev/guide/env-and-mode.html

answered Nov 16 at 23:03

gdoura mohamed

6944 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

binga58 2 days ago

i tried it on stackblitz.com/edit/node-6p2hc5py but getting

✘ [ERROR] TS2339: Property 'env' does not exist on type 'ImportMeta'. [plugin angular-compiler]        src/environments/environment.development.ts:3:19:        3 │   key: import.meta.env.VITE_MYKEY_PROD,

rorymichele · Accepted Answer · 2025-11-17 14:37:58Z

If your MYKEY_ just change per build target but don't necessarily come from an environment variable, Angular has the option to provide file replacements: https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app

This means providing several environment files, e.g.

# src/env/env.ts
export const MYKEY = undefined;

,

# src/env/dev.env.ts
export const MYKEY = 123;

and

# src/env/prod.env.ts
export const MYKEY = 456;

and telling angular which one to choose when in the angular.json

{
...
"architect":{
  ...
  "build": {
    ...
    "configurations": {
      "production": {
        ...
        "fileReplacements": [
          {
            "replace": "src/env/env.ts",
            "with": "src/env/env.prod.ts"
          }
        ]
      },
      "development": {
        ...
        "fileReplacements": [
          {
            "replace": "src/env/env.ts",
             "with": "src/env/env.dev.ts"
           }
         ]
       },

Then, in your consuming code, you simply import { MYKEY } from 'path/to/env.ts', i.e. import the variable from your dummy environment file which is replaced by the angular build system with the appropriate one.

If however the variable really has to come from an environment variable from the system where it is being build, i.e. is not known when writing the code, it depends a lot on the build system you are using. If your using the default of a current angular version, you'll probably want to use some additional tooling such as https://www.npmjs.com/package/@ngx-env/builder

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related