得到 NullInjectorError 的错误：没有 HttpClient 的提供者！在角度测试中答案

【问题标题】：Getting the error of NullInjectorError: No provider for HttpClient! in angular testing得到 NullInjectorError 的错误：没有 HttpClient 的提供者！在角度测试中
【发布时间】：2021-05-19 02:29:56
【问题描述】：

在 Angular 中运行 ng 测试时，我收到错误消息 SidebarComponent > 应该创建 NullInjectorError: R3InjectorError(DynamicTestModule)[AuthserviceService -> HttpClient -> HttpClient]: NullInjectorError: 没有 HttpClient 的提供者！

sidebar.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { SidebarComponent } from './sidebar.component';

describe('SidebarComponent', () => {
  let component: SidebarComponent;
  let fixture: ComponentFixture<SidebarComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SidebarComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SidebarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { NgModule ,Input, Output, EventEmitter} from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule, ThemeService } from 'ng2-charts';
import { AuthserviceService } from './authservice.service';
import { DashboardService } from './dashboard.service';
import { AppComponent } from './app.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import { SidebarComponent } from './shared/sidebar/sidebar.component';
import { FooterComponent } from './shared/footer/footer.component';
import { DashboardComponent } from './main/dashboard/dashboard.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SpinnerComponent } from './shared/spinner/spinner.component';
import { AboutComponent } from './main/about/about.component';
import { NotificationsComponent } from './main/notifications/notifications.component';
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { UserinfoComponent } from './userinfo/userinfo.component';
import { ReportComponent } from './main/report/report.component';
import { Shared } from './shared.service';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SidebarComponent,
    FooterComponent,
    DashboardComponent,
    SpinnerComponent,
    AboutComponent,
    NotificationsComponent,
    LoginComponent,
    MainComponent,
    UserinfoComponent,
    ReportComponent,
 
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    ChartsModule,
    HttpClientModule,

    ],
  providers: [ThemeService,AuthserviceService,DashboardService,Shared],
  bootstrap: [AppComponent]
})
export class AppModule { }

我是这个测试的新手，任何人都可以帮助我。

【问题讨论】：

标签： angular karma-jasmine karma-runner e2e-testing angular-test

【解决方案1】：

您必须使用所需的所有导入和提供程序来设置测试。当您使用 ng test 启动测试套件时，每个规范都是隔离的，并且不使用 AppModule，因此您必须重新设置测试用例的所有内容。

在这种特殊情况下，您应该将 HttpClientTestingModule 添加到测试用例的导入数组中，就在声明数组的下方。之后您可能会遇到其他错误，您将不得不不断添加模块和提供程序直到它工作，错误消息将有助于找到错误。

此链接可能会有所帮助：https://angular.io/guide/testing-components-scenarios

【讨论】：