Angular Environment.ts and .env Struggles

Support
, ,
1

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.

Cheers!
Aaron

2

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

3

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
https://exquisite-moxie-02affd.netlify.app/

Here’s my git repository
https://gitlab.com/aarons-group1/angular-project

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.
NODE_VERSION:18
NPM_FLAGS: --force

Cheers!
Aaron

4

Your repo doesn’t seem to be public.

5

Sorry it should be public now

6

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.

7

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/environment.prod.ts"
      }

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

8

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

9

I’m getting this repsonse in the devtools console

Uncaught ReferenceError: process is not defined
10

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…

11

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