Fetching data from multiple servers with Angular frondend

Question

We are developing an ERP with multiple back-ends running on various servers, for example, hr at abc.com/hr/api finance at xyz.com/api and so on

But we have single front-end Angular 6 application, we may be fetching data from various servers at a time.

I am new to Angular, but what little bit I know is we can define variables in environment.ts for either development , production or test server, but what If I bypass enviroment.ts settings with what ever http url I want. Thanks

Answer 1

Angular should not be concerned where it gets its Data from. You can contact multiple APIs. You dont have to specify the api url youre targeting in the environment (it makes it easier if youre always targeting the same api).

Or you can define multiple Api urls in the environment under different names eg API_URL_HR="" API_URL_FINANCE="".

The Http request needs to get the url from somewhere, but this can be an environment variable or a simple String or a variable.

Answer 2

I am not a pro either in Angular. Have been working on Angular from 6 months now.

So upto my knowledge, the preferred practice is to declare the Base Url in the environment.ts. When you BUILD the angular project it only takes the PROD environment.ts.

Now, coming to your question "but what If I bypass enviroment.ts settings with what ever http url I want." What I understand is if you don't define the base url in the environment.ts file you'll have to declare it in any of your component, that kind of works but if you someday have to change your Base url you'll have to change the link from each and every component you are using it in. So better stick with environment.ts.

I hope that answers your question rightly.