Angular2でHTTPモジュールを拡張するとエラーが発生する

Question

Angular2 HTTPモジュールを拡張してソートのHTTPインターセプタを作成しようとしていますが、このモジュールを拡張しようとすると唯一の問題は次のエラーが発生します：

No provider for ConnectionBackend! 

なぜこのようなことが起こっているのかわかりませんが、このエラーが発生するようではありません。ここで

は私のカスタムHTTPモジュールです：

import { Injectable } from "@angular/core"; 
import { Http, ConnectionBackend, RequestOptions, Request, RequestOptionsArgs, Response } from "@angular/http"; 
import { Observable } from "rxjs"; 

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

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
     console.log('request...'); 
     return super.request(url, options).catch(res => { 
      // do something 
     }); 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
     console.log('get...'); 
     return super.get(url, options).catch(res => { 
      // do something 
     }); 
    } 
} 

そして、ここでは私のapp.module.tsファイルです：

import 'app/rxjs-extensions'; 

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { HttpModule } from "@angular/http"; 
import { FormsModule } from "@angular/forms"; 

import { AuthGuard } from "./guards/auth.guard"; 
import { routing } from "./app.routing"; 

import { AppComponent } from './app.component'; 

import { HomeComponent } from "./components/home/HomeComponent"; 
import { LoginComponent } from "./components/login/LoginComponent"; 
import { NavBarComponent } from "./components/navbar/NavBarComponent"; 
import { ProductComponent } from "./components/catalog/products/ProductComponent"; 

import { GlobalEventsManager } from "./services/globalEventsManager.service"; 
import { AuthService } from "./services/auth.service"; 
import { ToastModule } from 'ng2-toastr/ng2-toastr'; 
import { LeftNavComponent } from "./components/left-nav/left-nav-component"; 
import { SettingsComponent } from "./components/settings/settings-component"; 
import { UsersComponent } from "./components/users/users-component"; 
import { OptionsComponent } from "./components/catalog/options/OptionsComponent"; 
import { CategoriesComponent } from "./components/catalog/categories/CategoriesComponent"; 
import { ManufacturersComponent } from "./components/catalog/manufacturers/ManufacturersComponent"; 
import { ProductSearchComponent } from "./components/catalog/products/directives/ProductSearchComponent"; 
import { ProductListComponent } from "./components/catalog/products/directives/ProductListComponent"; 
import { ProductService } from "./services/product.service"; 
import { HttpInterceptor } from "./services/HttpInterceptor.service"; 


@NgModule({ 
    imports: [ 
     BrowserModule, 
     HttpModule, 
     FormsModule, 
     routing, 
     ToastModule 
    ], 
    declarations: [ 
     AppComponent, 
     HomeComponent, 
     LoginComponent, 
     NavBarComponent, 
     ProductComponent, 
     ProductSearchComponent, 
     ProductListComponent, 
     LeftNavComponent, 
     SettingsComponent, 
     UsersComponent, 
     OptionsComponent, 
     CategoriesComponent, 
     ManufacturersComponent 
    ], 
    providers: [ 
     AuthService, 
     AuthGuard, 
     GlobalEventsManager, 
     ProductService, 
     HttpInterceptor 
    ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { } 

私はこの中のプロバイダの配列内の私のHttpInterceptorモジュールを配置しようとしていますこれはまだ動作しません。なぜこれが動作していないのですか？

ありがとうございます！

Answer 1

あなたはそうのように自分自身を構築し、あなたの拡張クラスを提供する必要があります。

また

ProductService, 
    { 
     provide: HttpInterceptor, 
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => 
      new HttpInterceptor(backend, defaultOptions), 
     deps: [XHRBackend, RequestOptions] 
    } 
], 

Answer 2

、あなたはそこに別のMyServiceでを注入する場合、あなたはその後

{ 
     deps: [XHRBackend, RequestOptions, MyService], 
     provide: HttpInterceptor, 
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, myService: MyService) => 
     new HttpInterceptor(backend, defaultOptions, myService), 
    }, 

を行うことができ、ただMyServiceをHttpInterceptorに入れてください