Lỗi: Không có nhà cung cấp cho HttpHandler trong angular2

Question

Tôi đang cố triển khai HttpCache thông qua trình chặn. Sau đây là bộ nhớ đệm-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); 
      } 
     }) 
    } 
} 

và tôi đang gọi từ 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 }); 
    } 


} 

và file Module sau

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] }; 
    } 
} 

tôi không hiểu, những gì còn thiếu nên nó đưa ra lỗi

No provider for HttpHandler.

Nếu tôi thêm HttpHandler vào nhà cung cấp trong tệp mô-đun, nó bắt đầu đưa ra lỗi để cung cấp: HTTP_INTERCEPTORS, thành phần.

Answer 1

HttpClient được giới thiệu ở góc 4.3, vì vậy nếu bạn muốn sử dụng HttpClient, bạn cần nhập HttpClientModule từ '@angular/common/http'. Đảm bảo nhập HttpClientModule sau BrowserModule như được hiển thị bên dưới. Điều này official doc và so answer sẽ cung cấp cho bạn thông tin indepth.

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

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