How can I implement process env in Angular 5 environment

Question

I am trying to build an angular 5 app. using 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:devops

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

This error occurs when I try and build the application

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

Is there any way to set up API-Url w.r.t an env variable when building the application.

Answer 1

Users do not have access to process.env in angular at compile time. process.env is not available to angular apps because it is only available to node apps.

Hope this helps!

To know more about Angular, It's recommended to join Angular Course today.

Thanks.

Answer 2

Try to hardcode it. Write environmental files for each of your environments, the environments can be specified in your angular-cli.json

Answer 3

You can also try creating a job of sorts in you pipeline to update the environment file with desired value.

Answer 4

As mentioned by @Haider, 

if you want to hardcode it you can use this in your angular-cli.json

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

and try building it with ng build --env=prod

Answer 5

Try this:

import {environment} from 'src/environments/environment';

Answer 6

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

Answer 7

This is not an answer rather a small tip. Don't put secret environment variables in enviroment.ts file.

Answer 8

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.