錯誤：在angular2中沒有提供HttpHandler的提供者

Question

我試圖通過攔截器實現HttpCache。以下是用於緩存interceptor.service.ts

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

import 'rxjs/add/operator/do'; 
import 'rxjs/add/observable/of'; 

export abstract class HttpCache { 
    abstract get(req: HttpRequest<any>): HttpResponse<any>|null; 
    abstract put(req: HttpRequest<any>, resp: HttpResponse<any>): void; 
} 



@Injectable() 
export class CachingInterceptor implements HttpInterceptor { 
    constructor(private cache: HttpCache) {} 

    intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>> { 
     if(req.method !== 'GET'){ 
      return next.handle(req); 
     } 

     const cachedResponse = this.cache.get(req); 

     if(cachedResponse){ 
      return Observable.of(cachedResponse); 
     } 

     return next.handle(req).do(event => { 
      if(event instanceof HttpResponse){ 
       this.cache.put(req, event); 
      } 
     }) 
    } 
} 

，我從test.service.ts

import { Injectable } from '@angular/core'; 
import { Headers, Http, Response} from '@angular/http'; 
import { HttpClient} from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 
import { ReplaySubject } from 'rxjs/ReplaySubject'; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

import { APIService } from './api.service'; 
import { CachingInterceptor } from './caching-interceptor.service'; 
import { ConfigurationService } from './configuration.service'; 
import { AuthenticationStatus, IAuthenticationStatus } from '../models'; 
import { User } from '../models/user.model'; 

@Injectable() 
export class PlatformService extends APIService { 



    constructor(private http: Http, public httpClient: HttpClient, private configuration: ConfigurationService, 
    public cachingInterceptor: CachingInterceptor) { 
    super(); 


    } 

    getUserById(id: string) { 
    console.log(this.requestOptions); 
    return this.httpClient.get(this._getAPIUrl('user/' + id),this.requestOptions). 
     subscribe(res => res); 
    } 
    get requestOptions(): RequestOptions { 
    const tokenObj = window.localStorage.getItem('TOKEN'); 
    const token = JSON.parse(tokenObj); 
    const headers = this.headers; 
    headers.append('Authorization', 'Bearer ' + token.token); 
    headers.append('Access-Control-Allow-Origin', '*'); 
    return new RequestOptions({ headers: headers }); 
    } 


} 

和模塊文件調用是繼

import { CommonModule } from '@angular/common'; 
import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http'; 
import { FormsModule } from '@angular/forms'; 

import { ModuleWithProviders, NgModule } from '@angular/core'; 

import { PlatformService } from '../../services/platform.service'; 
import { CachingInterceptor } from '../../services/caching-interceptor.service'; 


@NgModule({ 
    imports: [CommonModule, FormsModule], 

    declarations: [], 

    exports: [], 

    entryComponents: [EntryHereComponent] 
}) 
export class StructurModule { 
    public static forRoot(): ModuleWithProviders { 
    return { ngModule: StructurModule, providers: [PlatformService, 
     { 
     provide: HTTP_INTERCEPTORS, 
     useExisting: CachingInterceptor, 
     multi: true 
    },HttpClient] }; 
    } 
} 

我不明白，什麼是缺失，所以它給錯誤

No provider for HttpHandler.

如果我在模塊文件中的提供程序中添加HttpHandler，它會提供錯誤：HTTP_INTERCEPTORS，組件。

Answer 1

HttpClient引入角度4.3，所以如果你想使用HttpClient你需要從'@angular/common/http'導入HttpClientModule。確保在BrowserModule之後輸入HttpClientModule，如下所示。這official doc和so answer將給你深入的信息。

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

@NgModule({ 
imports: [ 
    BrowserModule, 
    HttpClientModule 
], 
...