How can I implement process.env in Angular 5 environment?

+1 vote

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.

Apr 3, 2018 in DevOps & Agile by DragonLord999
• 8,380 points

edited Aug 24, 2018 by Kalgi 4,267 views

8 answers to this question.

+1 vote

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.

answered Apr 3, 2018 by DareDev
• 6,810 points
0 votes

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

answered Dec 6, 2018 by Haider
0 votes

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

answered Dec 6, 2018 by krishti
0 votes

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

answered Dec 6, 2018 by Laksha
0 votes

Try this:

import {environment} from 'src/environments/environment';
answered Dec 6, 2018 by Khalso
0 votes

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

answered Dec 6, 2018 by Purav
0 votes
This is not an answer rather a small tip. Don't put secret environment variables in enviroment.ts file.
answered Dec 6, 2018 by Mahudkar
0 votes
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.
answered Dec 6, 2018 by Haseeb

Related Questions In DevOps & Agile

+1 vote
3 answers

How can I connect an app with an aws ec2 instance?

This is how you deploy a web ...READ MORE

answered Oct 18, 2018 in DevOps & Agile by Hannah
• 15,440 points
54 views
0 votes
1 answer

Can staging environment be accessible for only some people in Heroku?

First of all, there is nothing like ...READ MORE

answered Apr 13, 2018 in DevOps & Agile by shubham
• 6,890 points
23 views
0 votes
1 answer

Can I run a program on release failure in TFS?

You can try and do the following ...READ MORE

answered Apr 26, 2018 in DevOps & Agile by ajs3033
• 7,280 points
42 views
0 votes
1 answer

How do I list containers in Docker?

To view running containers use  below command: docker ps I you want ...READ MORE

answered Sep 4, 2018 in DevOps & Agile by Damon Salvatore
• 5,510 points
54 views
0 votes
1 answer
+13 votes
2 answers

Git management technique when there are multiple customers and need multiple customization?

Consider this - In 'extended' Git-Flow, (Git-Multi-Flow, ...READ MORE

answered Mar 26, 2018 in DevOps & Agile by DragonLord999
• 8,380 points
181 views
+3 votes
2 answers
0 votes
1 answer

How to disable auto-restart task in TeamCity

There is a parameter which can be ...READ MORE

answered Apr 29, 2018 in DevOps & Agile by DareDev
• 6,810 points
69 views