Angular执行测试报错: NullInjectorError: No provider for HttpClient!
报错内容
使用ng serve运行应用，通过访问http://localhost:4200，运行正常，未见报错。 但是，执行ng test测试就报错，错误内容如下：
// HeroeSearchComponentChrome 72.0.3622 (Mac OS X 10.13.6) HeroeSearchComponent should create FAILEDError: StaticInjectorError(DynamicTestModule)[HttpClient]: StaticInjectorError(Platform: core)[HttpClient]: NullInjectorError: No provider for HttpClient!// HeroServiceChrome 72.0.3622 (Mac OS X 10.13.6) HeroService should be created FAILEDError: StaticInjectorError(DynamicTestModule)[HttpClient]: StaticInjectorError(Platform: core)[HttpClient]: NullInjectorError: No provider for HttpClient!
错误原因:
没有引入 HttpClientTestingModule 模块, 执行测试用例时找不到模块。
解决办法:
在测试代码中，引入HttpClientTestingModule模块
beforeEach(async(() => {TestBed.configureTestingModule({declarations: [ HeroSearchComponent ],imports:[ RouterTestingModule, HttpClientTestingModule, FormsModule ]}).compileComponents();}));
修复后完整代码如下:
HeroeSearchComponent 测试文件:
// heros-search-component.spec.tsimport {async, ComponentFixture, TestBed } from '@angular/core/testing';import {HeroSearchComponent } from './hero-ponent';import {RouterTestingModule } from '@angular/router/testing';import {HttpClientTestingModule } from '@angular/common/http/testing';describe('HeroSearchComponent', () => {let component: HeroSearchComponent;let fixture: ComponentFixture<HeroSearchComponent>;beforeEach(async(() => {TestBed.configureTestingModule({declarations: [ HeroSearchComponent ],imports:[RouterTestingModule, HttpClientTestingModule]}).compileComponents();}));beforeEach(() => {fixture = TestBed.createComponent(HeroSearchComponent);component = ponentInstance;fixture.detectChanges();});it('should create', () => {expect(component).toBeTruthy();});});
HeroService 测试文件:
// hero.service.spec.tsimport {TestBed } from '@angular/core/testing';import {HeroService } from './hero.service';import {HttpClientTestingModule } from '@angular/common/http/testing';describe('HeroService', () => {beforeEach(() => TestBed.configureTestingModule({imports: [ HttpClientTestingModule ]}));it('should be created', () => {const service: HeroService = TestBed.get(HeroService);expect(service).toBeTruthy();});});
更多内容，请查看项目代码：
/cnwyt/angular-tour-of-heroes
[END]
