angular - NullInjectorError : R3InjectorError(DynamicTestModule)[ApiService -> HttpClient -> HttpClient]: NullInjectorError: No provider for HttpClient

Question

我看到很多人发布关于 NullInjectorError: No provider for HttpClient! 的问题但是我在 Karma 单元测试中遇到了更具描述性的错误。我一直在学习 Angular 和 Javascript/Typescript、HTML 和 CSS/SCSS，所以就我的基础而言，我到处都有点不稳定。我该如何解决这个错误？对于那些说是因为OP忘记导入测试模块的人，我已经导入了测试模块。这是我的测试文件的样子。当我注释掉 html 中的所有内容时，我仍然收到此错误。另外，我试图 stub ApiService。
错误:

NullInjectorError: R3InjectorError(DynamicTestModule)[ApiService -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'ApiService', 'HttpClient', 'HttpClient' ] })
    at <Jasmine>
    at NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:915:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11082:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11082:1)
    at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:801:1)
    at ɵɵinject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:805:1)
    at Object.ApiService_Factory [as factory] (ng:///ApiService/ɵfac.js:5:38)
    at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11249:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11071:1)
    at NgModuleRef$1.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24199:1)
    at Object.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:22102:1)

news.component.spec.ts的内容

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
// import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';

import { NewsComponent } from './news.component';
import { ApiService } from '../api.service';


describe('NewsComponent: show/hide button',() => {

    let component: NewsComponent;
    let fixture: ComponentFixture<NewsComponent>;

    const paragraphs = document.querySelectorAll("input");
    
    beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [ NewsComponent ],
          // here is my imported Http TestingModule
          imports: [ HttpClientTestingModule ],
          providers: [ 
            { provide: ApiService, useClass: FakeApiService }
           ]
        })
        .compileComponents();
      }));
    
      beforeAll(() => {
        fixture = TestBed.createComponent(NewsComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

});

class FakeApiService {

      fakeVal = 5;
      getNews() {
    }
}

Answer 1

您可以通过在 app.mdoule.ts 的步骤中执行以下操作来解决问题

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

 imports: [
    HttpClientModule
  ]

  providers: [HttpClient]

第一步是简单地在您的应用程序中导入相关的服务/模块，以便您可以进行 http 调用，第二步在您当前的模块中导入 httpClientModule，最后一步确保您可以实际使用 HttpClient 服务