How do I set the baseUrl for Angular HttpClient?

Question

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 1

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/