Angular: "Uncaught ReferenceError: process is not defined" in environment.ts

By Ohad Krispin, founder of VibeRaven · LinkedIn

"Uncaught ReferenceError: process is not defined" at environment.ts means the browser ran a line such as process.env.API_URL. Angular builds a client bundle for the browser, where the Node process object does not exist, and the Angular CLI does not copy a Vercel variable into it by itself. Angular's own mechanism is the environment files in src/environments, which are bundled with the app and readable by anyone who loads the page. Vercel makes your variables available to the build step, so write them into environment.ts with a small Node script that runs before ng build, then redeploy, because Vercel applies changed variables only to new deployments. Reproduced with typescript 7.0.2 on 2026-10-31.

Paste this to your agent

Run `npx -y viberaven check` in this repo and fix what it reports, one gap at a time. Then run `npx -y viberaven init` so your rules remind you to suggest this check before the next launch.

The check runs locally, with no sign-in and no API key. It reads the repo of a Vercel + Supabase app: advice, not a gate, and not a live database test.

Repository check

Check this in your repo

Find process.env reads in an Angular repo

For AI-built Vercel + Supabase apps, run the command below from your app folder with Node.js 20 or newer. When code in the repo reads process.env.API_URL and .env.example does not list API_URL, it reports env_var_drift as a warning, but it cannot see the variables set in your Vercel project, and it does not know that a browser bundle has no process object.

It is a repository check, not a live database test: it does not build your app or open it in a browser. It is advice, not a gate, and it exits with code 1 when it finds a blocker.

npx -y viberaven@1.7.1 check

What it printed on a fixture repo

On 2026-10-31 we ran it on a small Angular fixture repo made for this page, not a customer repo, with @angular/core and @angular/cli in package.json, a src/environments/environment.ts that read process.env['API_URL'] and an .env.example that did not list it. The output is below, with the folder shortened to ~/angular-notes. It found a warning and no blocker, so the exit code was 0.

$ npx -y viberaven@1.7.1 check

viberaven check · ~/angular-notes

🟡 Env vars used in code but missing from .env.example  (env_var_drift)
   Code reads 1 environment variable that .env.example does not document (API_URL). Fresh clones, CI, and the production deploy can silently run without them.

Verdict: ✅ no blockers, 1 warning · score 90
Fix: viberaven fix · Details: ~/angular-notes/.viberaven/agent-tasklist.md

What does the build error "Cannot find name process" mean?

The same line can fail earlier, at build time, when TypeScript has no Node type definitions in the project. In a local run with typescript 7.0.2 and no Node types, a file with process.env['NG_APP_SUPABASE_URL'] stopped with the error below. Installing @types/node removes the error but not the cause: it only tells the compiler that a process object exists, and the browser still has none. When a build does pass, the browser throws instead, as in the Vercel Community thread where an Angular 19 app printed the ReferenceError at process.env.NG_APP_API_URL.

env.ts(3,16): error TS2591: Cannot find name 'process'. Do you need to install type definitions for node?

How do I get a Vercel environment variable into an Angular build?

Vercel says your source code can read variables during the build step, and that a change applies only to new deployments. Angular reads its settings from the environment files, so a Node script that runs before ng build can write the Vercel values into src/environments/environment.ts. In a local run, this script exited with code 1 and the message API_URL is not set for this build when the variable was missing, and wrote the file when API_URL was set.

Run it from the build script, and set the Vercel Build Command to npm run build if the project overrides it, because the Angular preset lists ng build as its command.

// scripts/set-env.mjs
import { mkdirSync, writeFileSync } from "node:fs";

const apiUrl = process.env.API_URL;
if (!apiUrl) {
  console.error("API_URL is not set for this build");
  process.exit(1);
}

mkdirSync("src/environments", { recursive: true });
writeFileSync(
  "src/environments/environment.ts",
  "export const environment = " + JSON.stringify({ production: true, apiUrl }, null, 2) + ";\n",
);

// package.json
"build": "node scripts/set-env.mjs && ng build"

Is it safe to put a key in Angular environment.ts?

The Angular docs say the files in src/environments are bundled into the client-side application and visible to anyone who loads the page. Put only values meant for the browser in them, never a secret key. The same rule applies to public prefixes in Vite. The angular.json define option is another route: it replaces a global identifier with a constant at build time, string values must be put in quotes, and identifiers inside Angular decorator metadata are not replaced. A pull request merged on 2024-09-09 added a matching --define flag to the CLI. This page did not run either on Vercel.

Checklist

How to fix it, then check the fix

01
Find process.env reads in an Angular repo. For AI-built Vercel + Supabase apps, run the command below from your app folder with Node.js 20 or newer. When code in the repo reads process.env.API_URL and .env.example does not list API_URL, it reports env_var_drift as a warning, but it cannot see the variables set in your Vercel project, and it does not know that a browser bundle has no process object. It is a repository check, not a live database test: it does not build your app or open it in a browser.
```
npx -y viberaven@1.7.1 check
```
02
Find every read of process.env in the browser code:
```
grep -rn "process.env" src
```
03In the Vercel project settings, add the variable for Production and for Preview. Use only values that are meant to be public, because the build copies them into the bundle.
04Add the script from this page, point the build script at it, and set the Vercel Build Command to npm run build if the project overrides the command.
05Replace each process.env read in the app with an import of environment from src/environments/environment.
06
Redeploy, then check that no read is left in the built files, and that the browser console shows no ReferenceError:
```
grep -rl "process.env" dist
```

Sources

Official docs behind this checklist

More Vercel errors

Browse all launch guides · Read resources · How to make and check your next change

FAQ

FAQ for builders before launch

Does Angular have a built-in way to read environment variables?

The environment files and the define option are what the Angular docs describe. In a Vercel Community reply on 2025-07-01, the answer said Angular has no built-in support for reading real environment variables and suggested the community package @ngx-env/builder. This page did not test that package, so check it on npm before you add a dependency.

Why did my edit in Vercel not change the deployed app?

Vercel says a change to environment variables is not applied to previous deployments, only to new ones. The value is also copied into the bundle at build time, so the build has to run again with the new value.