angular - Nullinjectorerror:没有 FormBuilder 的提供者(我正在导入 ReactiveFormsModule)
问题描述
所以我正在尝试为一个组件编写一个非常基本的测试。我只是想确保我使用 FormBuilder 创建的表单是 FormGroup 的一个实例,但我一直收到 NullInjectorerror: No provider for FormBuilder,而且我已经尝试了几乎所有的方法。我确保我正在导入 ReactiveFormsModule。
小时计算器.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-hours-calculator',
templateUrl: './hours-calculator.component.html',
styleUrls: ['./hours-calculator.component.scss']
})
export class HoursCalculatorComponent implements OnInit {
constructor(private formBuilder: FormBuilder) { }
form: FormGroup;
ngOnInit() {
this.form = this.formBuilder.group({
control1: this.formBuilder.control('')
});
}
}
小时计算器.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormGroup, ReactiveFormsModule, FormsModule, FormBuilder } from '@angular/forms';
import { HoursCalculatorComponent } from './hours-calculator.component';
describe('HoursCalculatorComponent', () => {
let component: HoursCalculatorComponent;
let fixture: ComponentFixture<HoursCalculatorComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
ReactiveFormsModule
],
declarations: [ HoursCalculatorComponent ]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HoursCalculatorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create a form using formbuilder', () => {
expect(component.form instanceof FormGroup).toBeTruthy();
});
}
我只是错过了一些非常明显的东西吗?我真的把头发扯下来了。我对单元测试角度组件真的很陌生,所以像我 5 岁一样向我解释它:) 作为记录,我使用的是角度 7。
完整的错误信息:
StaticInjectorError(Platform: core)[HoursCalculatorComponent -> FormBuilder]:
NullInjectorError: No provider for FormBuilder!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3228:1)
at resolveToken (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3473:1)
at tryResolveToken (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3417:1)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3314:1)
at resolveToken (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3473:1)
at tryResolveToken (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3417:1)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:3314:1)
at resolveNgModuleDep (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:19784:1)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20473:1)
at resolveDep (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20844:1)
包.json
{
"name": "babysitter-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.1.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.11.0",
"@angular/cli": "~7.1.3",
"@angular/compiler-cli": "~7.1.0",
"@angular/language-service": "~7.1.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
}
解决方案
打开app.component.spec.ts
并添加ReactiveFormsModule
到导入数组。
app.component.spec.ts
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
ReactiveFormsModule <================================= add this
],
declarations: [
AppComponent,
HoursCalculatorComponent
],
}).compileComponents();
}));
推荐阅读
- hibernate - Hibernate - 使用一对一关系获取数据
- reverse-proxy - 基于入口域的路由在浏览器中不起作用,但我能够成功地在入口控制器 pod 上卷曲 URL
- php - FatalThrowableError - 在 null 上调用成员函数 getStatusCode()
- sql-server - 截断可以回滚或不回滚
- javascript - 在节点 js 中模拟浏览器
- javascript - Cytoscape.js 无法使用 cy.nodes().forEach 获得初始位置
- c# - 尝试更新sql数据库c#中的数据时出错
- python - 大熊猫数据框中每一行的类型比较,如果不匹配则更改为相似类型
- java - Selenium Chromedriver - 正常打开 Chrome
- c# - 时间:2019-05-10 标签:c#uwpLayout Cycle log