Use process.env in Angular 5 environment

Question

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?

Answer 1

At the time of compilation, you don’t have access to process.env, and it is available to node application where it is not available for angular application.

Other ways to resolve the issue:

 1. Make a task in your build pipeline to update the environment file with the correct value.

If it needed to be dynamic.

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

I think option 2 will help you to solve your problem, for that you need to put this in your angular-cli.json for that use

"environments": {

    "dev": "path/to/dev/env",

    "prod": "path/to/prod/env"

}

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

For further query refer: https://alligator.io/angular/environment-variables/

Want to become an Angular expert? Join this Angular Course now!