如何解决得到 NullInjectorError 的错误:没有 HttpClient 的提供者!在角度测试中
在 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 { }
我是这个测试的新手,谁能帮我。
解决方法
您必须使用您需要的所有导入和提供程序设置测试。当您使用 ng test 启动测试套件时,每个规范都是独立的,并且不使用 AppModule,因此您必须重新设置测试用例的所有内容。
在这种特殊情况下,您应该将 HttpClientTestingModule 添加到测试用例中的导入数组中,就在声明数组的下方。之后你可能会遇到其他错误,你必须不断添加模块和提供程序直到它工作,错误消息将有助于找到错误。
此链接可能有帮助:https://angular.io/guide/testing-components-scenarios
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。