Angular 2 - Dynamically find base url to use in the http requests (services)

Question

I'm wondering if there is a dynamic way of getting the base url, to use in the http requests?

Is there any way of getting the http://192.123.24.2:8080 dynamically?

public getAllTickets() {
    this._http.get('http://192.123.24.2:8080/services/', {
        method: 'GET',
        headers: new Headers([
            'Accept', 'application/json',
            'Content-Type', 'application/json'
        ])
    })

So, I my request would look something like:

public getAvailableVersions() {
    this._http.get('../services', {
        method: 'GET',
        headers: new Headers([
            'Accept', 'application/json',
            'Content-Type', 'application/json'
        ])
    })

I'm looking for a way to not having to hard code the URL for the REST calls. Or is the only option to have a global variable with the URL?

Thanks!

Possible duplicate of [Set base url for angular 2 http requests](http://stackoverflow.com/questions/34516651/set-base-url-for-angular-2-http-requests) — Günter Zöchbauer, Feb 19 '16 at 13:27
However, I think in my next solution, I am going to be setting a global variable. I will add a comment in this post when I've implemented it :) — Sojye, Mar 16 '16 at 13:41

Thierry Templier · Answer 1 · 2016-02-19T18:02:26.233

With version 2.0.0-beta.6 of Angular2, you can override the merge method

import {BaseRequestOptions, RequestOptions, RequestOptionsArgs} from 'angular2/http';

export class CustomRequestOptions extends BaseRequestOptions {

  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = 'http://192.123.24.2:8080' + options.url;
    return super.merge(options);
  }
}

You can register this class this way:

bootstrap(AppComponent, [HTTP_PROVIDERS,
    provide(BaseRequestOptions, { useClass: CustomRequestOptions })
]);

Another approach could be to extend the HTTP object to add at the beginning of the request URL a base URL.

First you could create a class that extends the Http one with a baseUrl property:

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
    this.baseUrl = 'http://192.123.24.2:8080';
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    return super.request(this.baseUrl + url, options).catch(res => {
      // do something
    });        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    console.log('get...');
    return super.get(this.baseUrl + url, options).catch(res => {
      // do something
    });
  }
}

and register it as described below:

bootstrap(AppComponent, [HTTP_PROVIDERS,
    new Provider(Http, {
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
      deps: [XHRBackend, RequestOptions]
  })
]);

I will try to implement your second example in my next solution :) — Sojye, Mar 16 '16 at 13:37
You can't just append to url in the request function as though it's always a string. It might be a Request object. — Tim Gautier, Jan 11 '17 at 17:14
Is this solution work with POST method? and why your second solution still have get method even it has request though? — Elec, Jan 30 '17 at 05:08

score 3 · Answer 2 · answered Feb 18 '16 at 07:38

You can create a file with your credentials

credentials.ts

export var credentials = {
  client_id: 1234,
  client_secret: 'secret',
  host: 'http://192.123.24.2:8080'
}

And import it into your file

import {credentials} from 'credentials'

public getAllTickets() {
    this._http.get(credentials.host + '/services/', {
        method: 'GET',
        headers: new Headers([
            'Accept', 'application/json',
            'Content-Type', 'application/json'
        ])
    })

And with that you can handle dev/prod credentials

In practice, is this the best way to define the base url? – niaomingjian Dec 27 '16 at 06:40 — niaomingjian, Dec 27 '16 at 06:40

score 0 · Answer 3 · answered May 30 '19 at 13:38

0

you can get your application context root as below

this.baseURL = document.getElementsByTagName('base')[0].href;

answered May 30 '19 at 13:38

Vishal Kumbhar

1
1

score -2 · Answer 4 · answered Feb 18 '16 at 07:55

import {LocationStrategy} from 'angular2/router';

constructor(private locationStrategy:LocationStrategy) {
  console.log(locationStrategy.prepareExternalUrl('xxx'));
}

See also https://github.com/angular/angular/blob/1bec4f6c6135d7aaccec7492d70c36e1ceeaeefa/modules/angular2/test/router/path_location_strategy_spec.ts#L88

Angular 2 - Dynamically find base url to use in the http requests (services)

4 Answers4

Linked