Erreur angulaire 4: aucun fournisseur pour HttpClient

Question

Je suis en train de créer un nouveau angulaire du projet avec la CLI et je suis en cours d'exécution dans un pas de fournisseur pour HttpClient d'erreur.

J'ai ajouté HttpClientModule de mon module importations qui semble être le coupable habituel dans ce scénario. Ne trouvant pas beaucoup en ligne, d'autres que je ne suis pas sûr de ce que le problème peut être.

mon application.le module.ts

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

et de mon service

@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);
    }
}

et ng version donne le résultat suivant

@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

mon 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"
    ]
  }
}

Mon test

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();
  }));

Toute aide est GRANDEMENT appréciée!

Answer 1

Dans votre test

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

CA devrait etre

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

ou même mieux (si vous voulez simuler une requête):

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

Answer 2

Importez HttpClientTestingModule.

Dans votre test:

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

et dans le configureTestingModule de votre test, procédez comme suit:

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

Answer 3

Un moyen plus simple consiste à le fournir globalement .... Importez les éléments suivants dans app.module.ts comme suit:

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

et le déclarer dans les importations:

   imports: [
    HttpModule,
    HttpClientModule, ...
]