Угловой 4 http перехватчик: фабрика не вызывается

Question

Я пытаюсь добавить перехватчик в мое угловое приложение.

У меня есть следующий код перехватчика

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

@Injectable()
export class CustomHttp extends Http {
    static get parameters() {
        return [[ConnectionBackend], [RequestOptions]];
    }
    constructor(private backend: ConnectionBackend,
        private defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

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

    post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
    }

    put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
    }

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

    getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
        if (options == null) {
            options = new RequestOptions();
        }
        if (options.headers == null) {
            options.headers = new Headers();
        }
        return options;
    }

    intercept(observable: Observable<Response>): Observable<Response> {
        debugger;
        //this.events.publish("httpInterceptor:request:initiated");
        return observable
            .do((res: Response) => {
                //this.events.publish("httpInterceptor:request:success");
            }, (err: any) => {
                //this.events.publish("httpInterceptor:request:failure", err);
            });
    }
}

export function HttpInterceptor(backend: ConnectionBackend,
    defaultOptions: RequestOptions) {
    debugger;
    return new CustomHttp(backend, defaultOptions);
}

И я использую в app.module следующим образом

 @NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    SpinnerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    HttpClientModule
  ],
  providers: [
    HttpEventHandler,
    XHRBackend,
    {
  provide: Http, useFactory: (xhrbackend, requestoptions, HttpEventHandler) => {
    return new CustomHttp(xhrbackend, requestoptions, HttpEventHandler);
  }, deps: [XHRBackend, RequestOptions, HttpEventHandler]
},
  ],
  bootstrap: [AppComponent, SpinnerComponent]
})
export class AppModule { }

Ниже приведены версии модулей, которые я использую

    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",

Но ни одно из утверждений отладчика не получает удар. Может ли кто-нибудь помочь мне здесь? И если я внедряю его в какой-либо компонент, он показывает ошибку как "нет поставщика для connectionbackend". Заранее спасибо.

Answer 1

С угловой 4.3 вот ссылка: - https://angular.io/guide/http

С текущей реализацией использования providers: [ HttpEventHandler, XHRBackend, CustomHttp, { provide: Http, useFactory: HttpInterceptor, deps: [XHRBackend, RequestOptions, HttpEventHandler] }, ],