角度2 HTTPレスポンス・インターセプター

Question

、：

import { Injectable } from '@angular/core'; 
import { 
    Http, 
    Response, 
    Request, 
    RequestOptions, 
    RequestOptionsArgs, 
    XHRBackend 
} from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/throw'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class HttpInterceptor extends Http { 

    constructor(xhrBackend: XHRBackend, requestOptions: RequestOptions) { 
    super(xhrBackend, requestOptions); 
    } 

    private catchErrors() { 
    return (response: Response) => { 
     if (response.status === 418) { 
      // do some stuff here 
     } 
     return Observable.throw(response); 
    }; 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    return super.request(url, options) 
      .catch(this.catchErrors()); 
    } 
} 

：角2で

angular.module('app', []) 
    .service('httpResponseInterceptor', ['$q', function ($q) { 
     this.response = function (response) { 
      if (response.status === 418) { 
       // do some stuff here 
      } 
      return response || $q.when(response); 
     }; 
     this.responseError = function (response) { 
      if (response.status === 418) { 
       // do some stuff here 
      } 
      return $q.reject(response); 
     }; 
    }]) 
    .config(['$httpProvider', function ($httpProvider) { 
     // do routing, etc. 

     $httpProvider.interceptors.push('httpResponseInterceptor'); 
    }]); 

、それが代わりにこのようなHttp何かを延長して行われます

...とapp.module.tsでこれを含めることにより：

providers: [ 
    { provide: Http, useClass: HttpInterceptor } 
] 

参照のためにthis stackoverflow answerおよびthis gistを参照してください。

---

しかし、私は上記の角度2のコードでこのエラーを取得しています：

は、循環依存をインスタンス化することはできません！ HTTP：in NgModule AppModule

Answer 1

この設定は私のために働いた;私は角2 V2.4.1を使用しています：

app.module.ts

{ 
    provide: Http, 
    useFactory: (backend: XHRBackend, options: RequestOptions) => { 
     return new HttpInterceptor(backend, options); 
    }, 
    deps: [XHRBackend, RequestOptions] 
} 

HttpInterceptor.ts

import { Injectable } from '@angular/core'; 
import { 
    Http, 
    ConnectionBackend, 
    RequestOptions, 
    RequestOptionsArgs, 
    Request, 
    Response, 
    Headers 
} from '@angular/http'; 

import { Observable } from 'rxjs/Rx'; 

@Injectable() 
export class HttpInterceptor extends Http { 
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { 
     super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.request(url, options)); 
    } 

    ... 
}