web-dev-qa-db-fra.com

Angular 4 Erreur: Aucun fournisseur pour HttpClient

Je commence un nouveau projet angular avec la CLI et je rencontre un fournisseur non pour l'erreur HttpClient.

J'ai ajouté HttpClientModule à mes importations de modules, ce qui semble être le coupable habituel dans ce scénario. Ne trouvant pas beaucoup de choses en ligne, je ne suis donc pas sûr du problème.

mes app.module.ts

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

et 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 la sortie suivante

@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!

angularangular-httpclient
39
mrpotocnik

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]
    });
63
Kevin Doyon

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, ...
]
9
Mike Axle

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();
6
Mwiza