Angular 5 服务无法通过单元测试（NullInjectorError：没有 HttpClient 的提供程序！）

typescript

Angular 5 服务无法通过单元测试（NullInjectorError：没有 HttpClient 的提供程序！）

在开发Angular应用程序时，我们经常会使用服务来处理数据请求和处理业务逻辑。然而，有时候我们可能会遇到一个问题，就是我们的服务在进行单元测试时无法通过，抛出一个错误信息："NullInjectorError: No provider for HttpClient!"

这个错误的原因是在我们的服务中使用了HttpClient，而在单元测试中，HttpClient的提供程序没有被正确地注入。为了解决这个问题，我们需要在测试环境中正确地注入HttpClient的提供程序。

解决方法：

在Angular中，我们可以使用Angular的TestingModule来创建一个测试模块，这个测试模块可以用来提供我们需要的依赖项。在测试模块中，我们可以使用HttpClientTestingModule来注入HttpClient的提供程序。

下面是一个示例代码，展示了如何在单元测试中正确地注入HttpClient的提供程序：

typescript
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { DataService } from './data.service';
describe('DataService', () => {
  let service: DataService;
  let httpMock: HttpTestingController;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [DataService]
    });
    service = TestBed.inject(DataService);
    httpMock = TestBed.inject(HttpTestingController);
  });
  afterEach(() => {
    httpMock.verify();
  });
  it('should retrieve data from API', () => {
    const mockData = { id: 1, name: 'John Doe' };
    service.getData().subscribe(data => {
      expect(data).toEqual(mockData);
    });
    const req = httpMock.expectOne('http://api.example.com/data');
    expect(req.request.method).toBe('GET');
    req.flush(mockData);
  });
});

在上面的示例代码中，我们首先导入了HttpClientTestingModule和HttpTestingController，它们是Angular提供的用于测试HttpClient的工具。然后，在beforeEach函数中，我们创建了一个测试模块，并使用HttpClientTestingModule将HttpClient的提供程序注入到测试模块中。接下来，我们使用TestBed.inject方法从测试模块中获取DataService和HttpTestingController的实例。在测试用例中，我们使用expectOne方法来拦截请求，并使用flush方法返回模拟的数据。

：

通过以上的方法，我们可以解决Angular 5服务无法通过单元测试的问题。通过正确地注入HttpClient的提供程序，我们可以在单元测试中使用HttpClient，并对服务进行测试。这样，我们就可以确保我们的服务在处理数据请求时正常工作，并且满足我们的预期。