Angular Environment.ts and .env Struggles

Facing an Angular dilemma with environment.ts and Netlify’s .env variable. The core issue: my Angular 16 app isn’t reading the .env variable set on netlify as I’m using environment.ts and I’ve tried process.env.API_KEY with the variables set on netlify but it doesn’t see it. Connected via GitHub to Netlify, but pushing to the repo updates Netlify—credentials and all. How do I manage this without leaking credentials on GitHub? Tried dotenv in Angular, but the polyfills and webpack have their own agenda. Any cleaner solutions out there?

export const environment = {
  production: true,
  apiUrl: 'API_URL',
  hasuraAdminSecret: 'HASURA_ADMIN_SECRET',
  // Other variables
import { environment } from '../environments/environment';
import 'dotenv/config';

const uri = process.env.API_URL || 'default-api-url';
const adminSecret = process.env.HASURA_ADMIN_SECRET || 'default-admin-secret';

The above isn’t the final code, I’ve played around and change different variables and imports etc so its just one of the many attempts. Looking for a smoother path without causing build system chaos.


Do you have a minimal reproduction we can use to experiment?

Sure, thanks for getting back to me. This is a similar application I built with API key and URL credentials.

As you can see the app isn’t working properly without the API key and URL

Here’s my git repository

I think as long as it reads the API_URL or the HASURA_ADMIN_SECRET variables given then it should be all good. Like a console.log that shows the values set from Netlify Environment Variables.

Below are the necessary variables in order for the deployment to complete itself.
NPM_FLAGS: --force


Your repo doesn’t seem to be public.

Sorry it should be public now

I think you need to configure target specific requirements since your environment.ts says production: false: Angular - Building and serving Angular apps and in your environment files, you should probably use the value asprocess.env['ENV'] instead of adding the strings the way you’ve done.

You mean like this?

  production: true,
  apiUrl: process.env['API_URL'],
  hasuraAdminSecret: process.env['HASURA_ADMIN_SECRET'],

I tried it that way before and also tried this

  "fileReplacements": [
        "replace": "src/environments/environment.ts",
        "with": "src/environments/"

But none this seems to be working. I’ll try again tomorrow when I wake up.

Based on Angular docs, that should be working. So let us know once you try that tomorrow and we can check again.

I’m getting this repsonse in the devtools console

Uncaught ReferenceError: process is not defined

I found a solution! I used @ngx-env/builder and it worked like a charm! Just needed to add the framework prefix NG_APP.

Do you know of any others ways instead of using this @ngx-env/builder? I’m curious…

Glad you found a solution! thanks for sharing this with the community.