Interceptor angular 4-HTTP

La respuesta de Akn es la correcta. Estaba tratando de hacerlo funcionar con el servicio http , pero el interceptor solo funciona con el servicio HttpClient .

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

Los tipos DOM globalmente disponibles ("lib": ["dom"] en su tsconfig) incluyen Response y Request interfaces que no están relacionadas con los tipos utilizados por Angular.

Necesitas importar Response y Request desde @angular/http.

La siguiente instrucción funcionó perfectamente para mí:

En el módulo app:

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { myInterceptor} from './Interceptors/myInterceptor';

@NgModule({
    imports: [
...
    HttpClientModule,
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: MyInterceptor,
    multi: true
  }],
  bootstrap: [AppComponent]
})

En el interceptor:

import { Injectable } from '@angular/core';

import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse
} from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import { HttpErrorResponse } from '@angular/common/http';
import { RequestOptions } from '@angular/http';
import { HttpHeaders } from '@angular/common/http';

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // when there is POST request
    if (req.method === 'POST') {
      const content_type = 'application/x-www-form-urlencoded';
      const req= req.clone({
        headers: req.headers.set('Content-Type', content_type),
        body: 'my body'
      });

      return next.handle(accessReq);
    }
  }
}

IMPORTANTE : http debe ser una instancia de HttpClient!

constructor(
    private http: HttpClient, private accessTokenService: AccessTokenService
) { }
    return this.http.post(ingestURL, null)
        .map(res => {
            return res; // data returned from interceptor
        });

Utilice esta lógica para interceptar Ajax en cualquier framework.

private bootstrapAjaxInterceptor() {
const _self = this;
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (xhrMethod, requestUrl) {
  this.addEventListener('readystatechange', xhr => {
    switch (this.readyState) {
      case 1: _self.onAjaxStart(xhrMethod, requestUrl); break;
      case 4: _self.onAjaxStop(this.responseURL, this.response); break;
      default: // Nothing to handle here
    }
  }, false);
  originalOpen.apply(this, arguments);
};

}

Aquí está el ejemplo completo para Angular.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
interface AjaxRequest {
  url?: string;
  requestCount?: number;
  method?: string;
}
interface AjaxResponse {
  url?: string;
  requestCount?: number;
  response?: string;
}
@Injectable()
export class HttpInterceptor {
  public ajaxStart = new BehaviorSubject<AjaxRequest>({});
  public ajaxStop = new BehaviorSubject<AjaxResponse>({});
  private requestQueue: Array<any> = [];
  constructor() {
    this.bootstrapAjaxInterceptor();
  }
  public getRequestQueue() {
    return this.requestQueue;
  }
  private bootstrapAjaxInterceptor() {
    const _self = this;
    const originalOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function (xhrMethod, requestUrl) {
      this.addEventListener('readystatechange', xhr => {
        switch (this.readyState) {
          case 1: _self.onAjaxStart(xhrMethod, requestUrl); break;
          case 4: _self.onAjaxStop(this.responseURL, this.response); break;
          default: // Nothing to handle here
        }
      }, false);
      originalOpen.apply(this, arguments);
    };
  }
  onAjaxStart(xhrMethod, requestUrl) {
    this.requestQueue.push(requestUrl.replace(/\?.*/, ''));
    this.ajaxStart.next({
      url: requestUrl,
      requestCount: this.requestQueue.length,
      method: xhrMethod
    });
  }
  onAjaxStop(responseURL, response) {
    const responseUrl = responseURL.split(/\?/)[0];
    this.requestQueue.forEach((urlEndpoint, i) => {
      if (new RegExp(`${urlEndpoint}$`).test(responseUrl)) {
        return this.requestQueue.splice(i, 1);
      }
    });
    this.ajaxStop.next({
      url: responseUrl,
      requestCount: this.requestQueue.length,
      response: response
    });
  }
}