CODEWITHSUNDEEP
angularenvironment-variables
Vivek Gupta
Vivek Gupta

Reputation: 361

How to use system environment variables in angular

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.

Upvotes: 1

Views: 2544

Answers (1)

SELA
SELA

Reputation: 6813

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.

Upvotes: 3

Related Questions