38

I try to build an Angular 5 application with the standard ng build --prod command, and I want to set the basic API-Url in the environment.prod.ts to a value dependent on my process.env variables.

This is my file:

export const environment = {
    production: true,
    apiUrl: `${process.env.BASE_URL}` || 'http://localhost:8070/',
};

But when I try to build the application the following error occurs:

ERROR in src/environments/environment.ts(7,16): error TS2304: Cannot find name 'process'.

How can I set my API-Url according to an env variable when building the application?

Freshchris
  • 1,211
  • 4
  • 17
  • 34
  • You could write a little node script that generates your environment file before you do your `ng build`. – matmo Mar 26 '18 at 16:43
  • 2
    You can update the webpack build to use `DefinePlugin`, or you could use https://babeljs.io/docs/plugins/transform-inline-environment-variables/ -- regardless, you will have to change your build pipeline. – Explosion Pills Mar 26 '18 at 16:44
  • I just used a JSON file - https://dev.to/jdgamble555/sharing-secret-environment-variables-with-google-cloud-build-and-angular-universal-7e3 – Jonathan Dec 25 '21 at 23:29

1 Answers1

29

Update

Per the comments below the original answer was not entirely clear -- Angular is built with Angular CLI, which is a node application, but you aren't able to access process.env directly from within the app during that build process, as it's not processed as a Node application.

The concepts stay pretty much the same, but it's important to understand the above.

Original

You won't have access to process.env at compile-time of the Angular code.

process.env is available to Node applications, which an Angular application is not.

You have several options:

  1. Make a task of some sort in your build pipeline to update the environment file with the correct value if it truly needs to be dynamic.

  2. Just hardcode it and make several environmental files to match each of your environments. You can specify your environments in your angular-cli.json.

Option number 2 sounds like it might be right for you. In that case, you want to put this in your angular-cli.json:

"environments": {
    "dev": "path/to/dev/env",
    "prod": "path/to/prod/env"
}

and build your app with ng build --env=prod.

Here is more in-depth information: https://alligator.io/angular/environment-variables/

chrispy
  • 3,552
  • 1
  • 11
  • 19
  • How do you access this? – chovy Jun 19 '18 at 18:31
  • You need to make process.env available to your Angular application. If it's there at build time, you can use gulp or something to put it in a constant Angular can access. You could make a request to the server at runtime to get them as well, if that's needed. – chrispy Jun 19 '18 at 20:20
  • 41
    I don't think put **secret** environment variables in environment.ts file is correct. – Lin Du Jul 24 '18 at 02:55
  • 12
    @novaline correct, you shouldn't put secret env vars in your environment files. But if you're shipping something to the browser, then it wouldn't be very secret anyway. – chrispy Jul 24 '18 at 21:11
  • What about ANgular 7? – Sebastián Rojas Apr 26 '19 at 00:40
  • 1
    @chrispy, yes it won't much of a secret on the browser. But what if I don't want to put my **secret** environmental variables in the **repository**? This would be my application for the **env** file. – Rin Minase Jan 31 '20 at 04:03
  • @RinMinase that's a separate discussion entirely, but you could pull from a vault or something at build time, or have a different protected shared space for storing those. This question would be applicable to secrets that are inherently exposed as they are going to the client. – chrispy Feb 02 '20 at 18:26
  • @chrispy, well, that would seem to be the only option as trying to compile angular with a custom webpack with the included config file is still not working. Anyways, thank you! Cheers! :) – Rin Minase Feb 04 '20 at 08:44
  • > process.env is available to Node applications, which an Angular application is not Angular CLI, which is what performs the build, is absolutely a Node application. So this is not the reason it doesn't work. It must be due to however `ng build` is processing it. – obsessiveprogrammer Sep 23 '20 at 13:11
  • 1
    @obsessiveprogrammer I've added a section to the answer to make sure that's clear to anyone coming across this answer. – chrispy Oct 03 '20 at 17:23