angular - change - staticinjectorerror string]: nullinjectorerror no provider for string

Error: No hay proveedor para HttpHandler en angular2

Question

Estoy tratando de implementar HttpCache a través de interceptor. A continuación se muestra el caching-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);
            }
        })
    }
}

y estoy llamando desde 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 });
  }


}

y el archivo del módulo está siguiendo

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 entiendo, lo que faltan así que da error.

Ningún proveedor para HttpHandler.

Si agrego HttpHandler en el proveedor en el archivo del módulo, empieza a dar un error para proporcionar: HTTP_INTERCEPTORS, componente.

Answer 1

HttpClient se introduce en angular 4.3, por lo que si desea utilizar HttpClient , debe importar HttpClientModule desde ''@angular/common/http'' . Asegúrese de importar HttpClientModule después de BrowserModule como se muestra a continuación. Este documento oficial y su respuesta le darán información detallada.

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

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