Błąd kątowy 4: Brak dostawcy dla HttpClient

Question

Zaczynam nowy, kanciasty projekt z interfejsem CLI i uruchamiam błąd nr dostawcy dla błędu HttpClient.

Dodałem HttpClientModule do mojego modułu importu, który wydaje się być zwykłym winowajcą w tym scenariuszu. Nie znajduję wiele online poza tym, więc nie jestem pewien, co może być problem.

moi app.module.ts

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

i mój serwis

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

i wersja ng daje następujący wynik

@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 

mój 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" 
    ] 
    } 
} 

Moje testy

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

Każda pomoc jest mile widziana!

Answer 1

W swoim badaniu

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

Powinno być

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

Answer 2

Łatwiejszy sposób jest dostarczenie go na całym świecie .... importować następujące w app.module.ts tak:

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

i zadeklaruj w przywozie:

imports: [ 
    HttpModule, 
    HttpClientModule, ... 
]