navigationend - router events subscribe angular 4

Angular 4 Error: No hay proveedor para HttpClient

Question

Estoy iniciando un nuevo proyecto angular con el CLI y me estoy encontrando con un proveedor que no HttpClient error HttpClient .

He agregado HttpClientModule a mis importaciones de módulos, que parece ser el culpable habitual en este escenario. No encuentro mucho en línea aparte de eso, así que no estoy seguro de cuál es el problema.

mi app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

y mi servicio

@Injectable()
export class FlexSearchService {


    constructor(private http: HttpClient) {}

    getSavedSearchResult(index: string, queryName: string, query: string ): Observable<any> {
      const url = `${environment.flexUrl}/${index}/search`;
      const item = new SearchQuery({queryName: queryName, variables: {q: query}});
      return this.http.post(url, item);
    }
}

y la versión ng da el siguiente resultado

@angular/cli: 1.4.2
node: 6.9.4
os: darwin x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4

mi tsconfig

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Mi prueba

import { TestBed, inject } from ''@angular/core/testing'';
import { HttpClientModule } from ''@angular/common/http'';
import { FlexSearchService } from ''./flex-search.service'';

describe(''FlexSearchService'', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [FlexSearchService, HttpClientModule]
    });
  });
  it(''should be created'', inject([FlexSearchService], (service: FlexSearchService) => {
    expect(service).toBeTruthy();
  }));

¡Cualquier ayuda es muy apreciada!

Answer 1

En tu prueba

TestBed.configureTestingModule({
      providers: [FlexSearchService, HttpClientModule]
    });

Debería ser

TestBed.configureTestingModule({
      imports: [HttpClientModule],
      providers: [FlexSearchService]
    });

Answer 2

Importar HttpClientTestingModule.

En tu prueba:

import { HttpClientTestingModule } from ''@angular/common/http/testing'';

y en el configureTestingModule de su prueba, haga lo siguiente:

TestBed.configureTestingModule({
    imports: [ HttpClientTestingModule ],
})
.compileComponents();

Answer 3

Una forma más fácil es proporcionarlo globalmente ... Importe lo siguiente en app.module.ts así:

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

y declararlo en importaciones:

  imports: [
    HttpModule,
    HttpClientModule, ...
]