Jasmin + karma：“错误：模块‘DynamicTestModule’导入了意外的值‘HttpClient’。请添加 @NgModule 注释。”

Angular是一种流行的前端开发框架，它提供了许多强大的功能和工具，使开发人员能够快速构建现代化的Web应用程序。在使用Angular开发过程中，我们可能会遇到各种各样的问题和错误。其中一个常见的错误是“错误：模块‘DynamicTestModule’导入了意外的值‘HttpClient’。请添加 @NgModule 注释。”

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 the API', () => {
    const dummyData = { id: 1, name: 'John Doe' };
    service.getData().subscribe(data => {
      expect(data).toEqual(dummyData);
    });
    const req = httpMock.expectOne('http://api.example.com/data');
    expect(req.request.method).toBe('GET');
    req.flush(dummyData);
  });
});

typescript
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { DataService } from './data.service';
describe('DataService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [DataService]
    });
  });
  it('should retrieve data from the API', () => {
    // ...
  });
});