Nullinjectorerror：没有 FormBuilder 的提供者（我正在导入 ReactiveFormsModule）

Question

所以我正在尝试为组件编写一个非常基本的测试。我只是想确保我使用 FormBuilder 创建的表单是 FormGroup 的一个实例，但我一直收到 NullInjectorerror: No provider for FormBuilder，而且我已经尝试了几乎所有的方法。我确定我正在导入 ReactiveFormsModule。

hours-calculator.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)

package.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"
      }
    }

Answer 1

在最新版本的 Angular 中，即使在表单页面中导入 ReactiveFormsModule 后，我仍然面临这个问题，除非我也在主 app.module.ts 文件中导入了相同的 ReactiveFormsModule。

Answer 2

在ngModule中需要从@angular/forms导入ReactiveFormsModule：

import { ReactiveFormsModule } from '@angular/forms';

并在imports下添加ReactiveFormsModule：

imports: [ReactiveFormsModule]

Answer 3

打开app.component.spec.ts 并将ReactiveFormsModule 添加到导入数组中。

app.component.spec.ts

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule <================================= add this
      ],
      declarations: [
        AppComponent,
        HoursCalculatorComponent
      ],
    }).compileComponents();
  }));

Answer 4

在ngModule需要导入formModule

  imports: [ 
      FormsModule,
      ReactiveFormsModule,
  ],

在单元测试中也导入它，

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
          ReactiveFormsModule,
          FormsModule,
      ],
      declarations: [ HoursCalculatorComponent ]
    }).compileComponents();
  }));