How do I set the baseUrl for Angular HttpClient?

angular angular-httpclient
Stepan Suvorov picture Stepan Suvorov · Aug 17, 2017 · Viewed 63.5k times · Source

I did not find a way in the documentation to set the base API URL for HTTP requests. Is it possible to do this with the Angular HttpClient?

Answer

TheUnreal picture TheUnreal · Aug 17, 2017

Use the new HttpClient Interceptor.

Create a proper injectable that implements HttpInterceptor:

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class APIInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const apiReq = req.clone({ url: `your-api-url/${req.url}` });
    return next.handle(apiReq);
  }
}

The HttpInterceptor can clone the request and change it as you wish, in this case I defined a default path for all of the http requests.

Provide the HttpClientModule with the following configurations:

providers: [{
      provide: HTTP_INTERCEPTORS,
      useClass: APIInterceptor,
      multi: true,
    }
  ]

Now all your requests will start with your-api-url/

Related questions

Catching errors in Angular HttpClient

I have a data service that looks like this: @Injectable() export class DataService { baseUrl = 'http://localhost' constructor( private httpClient: HttpClient) { } get(url, params): Promise<Object> { return this.sendRequest(this.baseUrl + url, 'get', null, params) .map((res) => { return …

Read More
Adding a HTTP header to the Angular HttpClient doesn't send the header, why?

Here is my code: import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; logIn(username: string, password: string) { const url = 'http://server.com/index.php'; const body = JSON.stringify({username: username, password: password}); const headers = new HttpHeaders(); headers.set('Content-Type', …

Read More
Angular 4 HttpClient Query Parameters

I have been looking for a way to pass query parameters into an API call with the new HttpClientModule's HttpClient and have yet to find a solution. With the old Http module you would write something like this. getNamespaceLogs(logNamespace) { // …

Read More