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,450 points

edited Aug 24, 2018 by Kalgi 11,069 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.

Hope this helps!

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

Thanks.

answered Apr 3, 2018 by DareDev
• 6,890 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

0 votes
1 answer

How can I preview PowerPoint files in Azure DevOps (VSTS)?

For work item attachments, there are no ...READ MORE

answered Mar 8 in DevOps & Agile by gaurav
• 17,000 points
83 views
0 votes
1 answer

Azure DevOps Wiki: How can I link the subpages in the parent page?

Unfortunately, Azure Devops does not have the ...READ MORE

answered Mar 8 in DevOps & Agile by gaurav
• 17,000 points
66 views
0 votes
1 answer

Azure DevOps Wiki: How can I link the subpages in the parent page?

Unfortunately, Azure Devops does not have the ...READ MORE

answered Mar 8 in DevOps & Agile by gaurav
• 17,000 points
619 views
+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
• 18,570 points
947 views
+1 vote
1 answer
+15 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 27, 2018 in DevOps & Agile by DragonLord999
• 8,450 points
1,761 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,890 points
634 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP