How to use system environment variables in angular

Question

I've been using spring boot which has a nice feature of using the system environment variables in properties file, now I want to use the system environment variable to set the backend server url in angular. I'm not sure how this works in angular.

For eg. BACKEND_URL=http://somerandomurl

I don't want to hardcode the server url in config file. I want to do something like apiurl=$(BACKEND_URL)

This is due to fact that I'll be using kubernetes while deployment.

Selaka Nanayakkara · Accepted Answer · 2023-07-14 10:19:22Z

3

You can use Angular environment.ts file to configure your backend URLs.

In fact you can assign multiple backend url as you wish. For example (prod, dev, qa)

 // environment.ts
    export const environment = {
      production: false,
      baseUrl: 'http://localhost:3333'
    };
    
 // environment.prod.ts
    export const environment = {
      production: true,  
      baseUrl: 'https://jsonplaceholder.typicode.com'
    };

 // environment.qa.ts
    export const environment = {
      production: true,  
      baseUrl: 'https://jsonplaceholder.typicode.com'
    };

Then you can build the angular project with relevent environment you prefer. Angular will assign the base urls acccording to the passed parameter in build time.

ng build --configuration=prod
ng build --configuration=qa

From herewith Im attaching reference link of official angular documentation on how to do it here.

Also please find the practical demonstration here. Please refer to the stackblitz example here and it relevent article here.

edited Jul 14, 2023 at 10:19

answered Nov 22, 2020 at 5:01

Selaka Nanayakkara

6,9963 gold badges27 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vivek Gupta Over a year ago

What if I don't know the url before deploying the application? Like I don't want to hardcode the url into the config file

Gvs Akhil Over a year ago

Then u need to get the url from an api and set it in your store or localStorage and use it all across your application @VivekGupta

userfuser Over a year ago

This doesn't seem to be an answer to the OP, since you DO need to hardcode the values into the environment file (one or the other), but I suppose this solution is what's possible in Angular.

Collectives™ on Stack Overflow

How to use system environment variables in angular

1 Answer 1

You can use Angular environment.ts file to configure your backend URLs.

In fact you can assign multiple backend url as you wish. For example (prod, dev, qa)

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

You can use Angular environment.ts file to configure your backend URLs.

In fact you can assign multiple backend url as you wish. For example (prod, dev, qa)

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related