0

Currently, I'm working on reading URL from the browser and assigning that as global URL, instead of hardcoding the base_url I need it to be read from the browser and patch that to the all the service with the URL. I have tried doing this and this code works but the problem is once the screen is reloaded all the APIs are going to fail.

CODE

 setTimeout(() => {
     if (environment.production) {
         base_url = window.location.origin + '/APPLICATION/resources/';
     }else {
        base_url = 'http://106.51.66.219:1234/APPLICATION/resources/' ;
     }
 }, 1000);

is there any better way to set the base_url and it works flawlessly even after clicking of the refresh.

Abhishek Ekaanth
  • 2,511
  • 2
  • 19
  • 40
  • Why would it fail after a page reload? I'm not sure to understand the problem nor the solution... – plalx Feb 15 '19 at 18:32
  • because of the setTimeout @plalx – Abhishek Ekaanth Feb 15 '19 at 18:46
  • Well, the origin couldn't possibly change without a page reload, which will run this code again. This is running in a browser right? – plalx Feb 15 '19 at 18:54
  • @plalx yes. looks like even with short settimeout its still creating problem – Abhishek Ekaanth Feb 15 '19 at 18:56
  • What kind of problem and why do you even have a timeout? `window.location` is available immediately. The timeout would be causing the issue if you have API requests triggered before the timeout interval... Furthermore, this looks like a bad idea in general. The configuration should come from a file that exists on the machine serving the application IMO. – plalx Feb 15 '19 at 18:59
  • this this needs to be like a sandbox. there is no fixed base url provided it has to pick from the browser and then patch it up to make API calls. for example when this application is deployed in various servers the Ip of the server is different but it should be able to pick the deployed and make all those API calls. it works perfectly fine for first time which is before refresh/ @plalx – Abhishek Ekaanth Feb 15 '19 at 19:09
  • 1
    Well, the problem must be something else and the timeout is completely useless by the way. During a full page refresh this code should run again and there should be no distinction between the first load and subsequent refreshes. What do you mean by "not working" by the way. – plalx Feb 15 '19 at 19:17
  • so when I refresh the page the API calls are made with Undefined + the corresponding API calls. Or is there a better way to make it work seamlessly in the production environment. @plalx – Abhishek Ekaanth Feb 15 '19 at 19:20
  • Drop the timeout entirely (do not use `setTimeout`) and make sure this code runs before other code (loaded first) and it will work as expected. You'd have to tell which version of Angular to get an appropriate solution using the framework. – plalx Feb 15 '19 at 19:26
  • I'm working on angular 6 and this code is in an separate file which loads when it is loading the modules. And how do I make this code global and still use the base url? @plalx – Abhishek Ekaanth Feb 15 '19 at 19:31
  • 1
    The solution is as simple as putting your if statement in a file and remove the wrapping `setTimeout` and then make sure this file is loaded before the Angular application runs. You can then use the `base_url` global variable in your services (no injection required: not clean but it will work). For a better way aligned with Angular check [here](https://stackoverflow.com/questions/34986922/define-global-constants-in-angular-2). – plalx Feb 15 '19 at 19:51
  • What's wrong relative urls and cli proxy configs? – Robin Dijkhof Feb 19 '19 at 10:34

3 Answers3

0

As your using angularjs, you can try $location service to get URL from browser as below and this will work as well when reload the page 

setTimeout(() => {
 if (environment.production) {
     base_url = $location.protocol()+'//'+$location.host() + '/APPLICATION/resources/';
 }else {
    base_url = 'http://106.51.66.219:1234/APPLICATION/resources/' ;
 }
}, 1000);

and If in production have port in url then have to write some condition to join port ($location.port()) in url

Mohit Raiyani
  • 21
  • 3
  • 2
    Not sure. But angularjs should be tagged angularjs. Angular 2+ should be tagged angular. One of the two of you is wrong here. – JGFMK Feb 15 '19 at 19:25
0

Two things:

  1. Never expose such configurations to the client. In the production version, people can see your dev endpoint. Try and move such configurations as much as possible to your build/bundling system.

  2. It's a good idea to define all such constants in a service or a constants.ts file. As pointed out by @plalx

varun agarwal
  • 1,491
  • 6
  • 9
0

You can use standard JS here:

window.location.href

But you rather want to use the Angular route for that:

constructor(route: ActivatedRoute) {
    const url: Observable<string> = route.url.map(segments => segments.join(''));
    url.subscribe((url) => console.log(url));
}

See: https://angular.io/api/router/ActivatedRoute

bb1
  • 141
  • 1
  • 10