Intercepting http request/respons in Angular 2. Works from version 2.3.0.

app.module.ts

...
...
providers: [
    { provide: Http, useClass: ExtendedHttpService }
  ]
...
...

extended-http.service.ts

import { Injectable } from '@angular/core';
import { Request, XHRBackend, RequestOptions, Response, Http, RequestOptionsArgs, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { AuthService } from './auth/auth.service';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/of';

@Injectable()
export class ExtendedHttpService extends Http {

  constructor(backend: XHRBackend, defaultOptions: RequestOptions, private router: Router, private authService: AuthService) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    //do whatever 
    if (typeof url === 'string') {
      if (!options) {
        options = { headers: new Headers() };
      }
      this.setHeaders(options);
    } else {
      this.setHeaders(url);
    }

    return super.request(url, options).catch(this.catchErrors());
  }

  private catchErrors() {
    return (res: Response) => {
      if (res.status === 401 || res.status === 403) {
        //handle authorization errors
        //in this example I am navigating to logout route which brings the login screen
        this.router.navigate(['logout']);
        return Observable.of(res);
      } else {
        return Observable.throw(res);
      }
    };
  }

  private setHeaders(objectToSetHeadersTo: Request | RequestOptionsArgs) {
    //add whatever header that you need to every request
    //in this example I add header token by using authService that I've created
    objectToSetHeadersTo.headers.set('Token', this.authService.getToken());
  }
}

my.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class MyService {
  constructor(private http: Http) { } // the provided ExtendedHttpService will be injected here

  getFromServer(): Observable<Whatever[]> {
    return this.http.get(WHATEVER_URL).map((res: Response) => res.json());
  }
}

it looks like I also have the same problem with angular 4.0.3 and it works Observable.of, but I'm using ngrx/store and I need to cancel original fetch action without dispatching error one which does listen in catch block. Also to reset all the state by firing new redux action. Do you have any idea how to cancel current action with has actually made that http call?