![](/img/trans.png)
[英]NullInjectorError: No provider for HttpClient! Angular 5
[英]Getting the error of NullInjectorError: No provider for HttpClient! in angular testing
在 angular 中运行 ng 测试时,出现错误,因为 SidebarComponent > should create NullInjectorError: R3InjectorError(DynamicTestModule)[AuthserviceService -> HttpClient -> HttpClient]: NullInjectorError: No provider for HttpClient!
侧边栏.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();
});
});
应用程序模块.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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.