Angular 4 錯誤：沒有 HttpClient 的提供者

Question

我正在使用 CLI 啟動一個新的 angular 項目，並且遇到了HttpClient錯誤的無提供程序。

我已將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]
    });

甚至更好（如果你想模擬請求）：

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

Answer 2

導入 HttpClientTestingModule。

在您的測試中：

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

並在測試的 configureTestingModule 中，執行以下操作：

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

Answer 3

一種更簡單的方法是在全球范圍內提供它....將以下內容導入 app.module.ts 中，如下所示：

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

並在進口中聲明：

  imports: [
    HttpModule,
    HttpClientModule, ...
]

Answer 4

為此，您必須導入以下內容：

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

對於測試的configureTestingModule中的規范文件，請執行以下操作：

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

Answer 5

當我嘗試使用 npm 鏈接在我的項目中本地鏈接我的 angular 庫時，我注意到了這個問題。

從存儲庫下載庫解決了我的問題。