Set base url for angular 2 http requests

by

For angular 4.3+ and @angular/common/http

It’s can be done with interceptors

@Injectable()
export class ExampleInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const url="http://myurl.com";
    req = req.clone({
      url: url + req.url
    });
    return next.handle(req);
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpClientModule, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ...
  ],
  providers: [
    AppComponent,
    { provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

EDIT: HttpClient and HttpInterceptor are introduced in Angular 4.3

More Related Contents:

  1. Is it necessary to unsubscribe from observables created by Http methods?
  2. File Upload In Angular?
  3. Angular 2 http.post() is not sending the request
  4. Difference between HttpModule and HttpClientModule
  5. Angular: Cannot find a differ supporting object ‘[object Object]’
  6. Angular – POST uploaded file
  7. How to use/import http module?
  8. angular 2 http withCredentials
  9. Angular 2 – Routing – CanActivate work with Observable
  10. Angular2 watch for 302 redirect when fetching resource
  11. Angular – Use pipes in services and components
  12. OrderBy pipe issue
  13. Angular CLI SASS options
  14. PowerShell script add ‘–prod’ argument to build Angular CLI project
  15. Expandable table rows in angular 4 with angular material
  16. Angular 2 cache observable http result data [duplicate]
  17. How can I communicate between two child components in angular? [duplicate]
  18. Deep copying objects in Angular
  19. Angular 2 Read More Directive
  20. Testing – Can’t resolve all parameters for (ClassName)
  21. When to use Interface and Model in TypeScript / Angular
  22. How to display the app version in Angular?
  23. Migrating Angular 4.x to Angular 5 [duplicate]
  24. Angular 7 – nesting Observables
  25. Making sure observables in for loop are all finished before executing other code
  26. Angular @ViewChild() error: Expected 2 arguments, but got 1
  27. How to throw error from RxJS map operator (angular)
  28. Angular2 ngModel inside ngFor (Data not binding on input)
  29. Need BrowserAnimationsModule in Angular but gives error in Universal
  30. What are all the index.ts used for?

Leave a Comment