角4エラー：HttpClientのプロバイダがありません

Question

CLIを使用して新しい角度プロジェクトを開始しましたが、HttpClientエラーのnoプロバイダを実行しています。

私はこのシナリオの通常の原因と思われるモジュールのインポートにHttpClientModuleを追加しました。私はそれ以外のオンラインをたくさん見つけていないので、その問題が何であるか分かりません。

私app.module.ts

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

と私のサービスは

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

とngのバージョンは、次の出力に

@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 

私の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" 
    ] 
    } 
} 

私のテスト

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

すべてのヘルプは大歓迎です！あなたのテストで

Answer 1

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

それは

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

Answer 2

する必要があります簡単な方法はそうのようなapp.module.tsに次のようにインポートします....グローバルに提供することです。

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

輸入品で宣言してください：

imports: [ 
    HttpModule, 
    HttpClientModule, ... 
]