Angular2 + testcase显示没有NgControl的提供者(Angular2+ testcase shows No provider for NgControl)

我试图测试一个角度很大的依赖项。但测试用例期望（component）.toBeTruthy（）; 错误：无NgControl的提供程序失败。完整的错误信息如下：

Chrome 66.0.3359 (Mac OS X 10.13.4) configurator component unit tests has a configurator FAILED </div> [ERROR ->]<form *ngIf="!loading" class="form" [formGroup]="options"> <mat-form-field> <form *ngIf="!loading" class="form" [formGroup]="options"> <mat-form-field> <mat-form-field> [ERROR ->]<input matInput #input placeholder="{{'customer.lastname' | translate}}" formControlName="lastname"> <mat-form-field> [ERROR ->]<input matInput placeholder="{{'customer.email' | translate}}" formControlName="email"> error properties: Object({ ngSyntaxError: true, ngParseErrors: [ No provider for ControlContainer (" <input matIn"): ng:///DynamicTestModule/CustomerComponent.html@12:5, No provider for NgControl (" [ERROR ->]<input matInput #input placeholder="{{'customer.firstname' | translate}}" formControlName="firstname""): ng:///DynamicTestModule/CustomerComponent.html@14:7, No provider for NgControl (" "): ng:///DynamicTestModule/CustomerComponent.html@18:7, No provider for NgControl (" <mat-e"): ng:///DynamicTestModule/CustomerC ... Error: Template parse errors: at <Jasmine> at syntaxError node_modules/@angular/compiler/esm5/compiler.js:486:22) at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse node_modules/@angular/compiler/esm5/compiler.js:24674:1) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate node_modules/@angular/compiler/esm5/compiler.js:34629:1) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate node_modules/@angular/compiler/esm5/compiler.js:34604:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34505:48 at <Jasmine> at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents node_modules/@angular/compiler/esm5/compiler.js:34505:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34393:1 at Object.then node_modules/@angular/compiler/esm5/compiler.js:475:33) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndAllComponents node_modules/@angular/compiler/esm5/compiler.js:34391:1) Expected undefined to be truthy. at <Jasmine> at UserContext.<anonymous> src/app/configurator/configurator.component.spec.ts:90:26) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1) at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/proxy.js:128:1) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:387:1) Chrome 66.0.3359 (Mac OS X 10.13.4): Executed 1 of 1 (1 FAILED) (0 secs / 0 secs) Chrome 66.0.3359 (Mac OS X 10.13.4) configurator component unit tests has a configurator FAILED </div> [ERROR ->]<form *ngIf="!loading" class="form" [formGroup]="options"> <mat-form-field> <form *ngIf="!loading" class="form" [formGroup]="options"> <mat-form-field> <mat-form-field> [ERROR ->]<input matInput #input placeholder="{{'customer.lastname' | translate}}" formControlName="lastname"> <mat-form-field> [ERROR ->]<input matInput placeholder="{{'customer.email' | translate}}" formControlName="email"> error properties: Object({ ngSyntaxError: true, ngParseErrors: [ No provider for ControlContainer (" <input matIn"): ng:///DynamicTestModule/CustomerComponent.html@12:5, No provider for NgControl (" [ERROR ->]<input matInput #input placeholder="{{'customer.firstname' | translate}}" formControlName="firstname""): ng:///DynamicTestModule/CustomerComponent.html@14:7, No provider for NgControl (" "): ng:///DynamicTestModule/CustomerComponent.html@18:7, No provider for NgControl (" <mat-e"): ng:///DynamicTestModule/CustomerC ... Error: Template parse errors: at <Jasmine> at syntaxError node_modules/@angular/compiler/esm5/compiler.js:486:22) at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse node_modules/@angular/compiler/esm5/compiler.js:24674:1) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate node_modules/@angular/compiler/esm5/compiler.js:34629:1) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate node_modules/@angular/compiler/esm5/compiler.js:34604:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34505:48 at <Jasmine> at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents node_modules/@angular/compiler/esm5/compiler.js:34505:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34393:1 at Object.then node_modules/@angular/compiler/esm5/compiler.js:475:33) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndAllComponents node_modules/@angular/compiler/esm5/compiler.js:34391:1) Expected undefined to be truthy. at <Jasmine> at UserContext.<anonymous> src/app/configurator/configurator.component.spec.ts:90:26) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1) at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/proxy.js:128:1) Chrome 66.0.3359 (Mac OS X 10.13.4): Executed 1 of 1 (1 FAILED) ERROR (0.838 secs / 0 secs)

我已经包括像FormsModule和RouterTestingModule的东西，但它仍然无法正常工作。

describe('configurator component unit tests', () => { let configurator: ConfiguratorComponent; let fixture: ComponentFixture<ConfiguratorComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ providers: [ ProductsService, OrdersService, UdiService, CustomersService, TranslateService, { provide: ActivatedRoute, useValue: { params: Observable.of({ id: 'test' }) } } ], declarations: [ ConfiguratorComponent, LoginComponent, ForgotpasswordComponent, ResetpasswordComponent, RegisterComponent, ContactComponent, CustomerComponent, HomeComponent, PageNotFoundComponent], imports: [ FormsModule, CommonModule, TranslateModule, MatProgressSpinnerModule, MatButtonModule, ElementsModule, ViewerModule, OrdersModule, RouterTestingModule], schemas: [NO_ERRORS_SCHEMA] }).compileComponents( ).then(() => { fixture = TestBed.createComponent(ConfiguratorComponent); configurator = fixture.componentInstance; }); }));

所以我明显缺少一些模块，但哪一个？我对角测试床相当陌生。

角色版本：5.2版本：2.0.2 karma-jasmine版本：1.1.1

哦，它可能是那个的复制品，但是因为在我添加的建议之后，这个从来没有得到答案，所以我认为它没问题。：S Angular2 testcase显示没有NgControl的提供者

I am trying to test an angular component which has quite a lot of dependencies. But the test case expect(component).toBeTruthy(); fails with the Error: No Provider for NgControl. The full error message is the following:

Chrome 66.0.3359 (Mac OS X 10.13.4) configurator component unit tests has a configurator FAILED </div> [ERROR ->]<form *ngIf="!loading" class="form" [formGroup]="options"> <mat-form-field> <form *ngIf="!loading" class="form" [formGroup]="options"> <mat-form-field> <mat-form-field> [ERROR ->]<input matInput #input placeholder="{{'customer.lastname' | translate}}" formControlName="lastname"> <mat-form-field> [ERROR ->]<input matInput placeholder="{{'customer.email' | translate}}" formControlName="email"> error properties: Object({ ngSyntaxError: true, ngParseErrors: [ No provider for ControlContainer (" <input matIn"): ng:///DynamicTestModule/CustomerComponent.html@12:5, No provider for NgControl (" [ERROR ->]<input matInput #input placeholder="{{'customer.firstname' | translate}}" formControlName="firstname""): ng:///DynamicTestModule/CustomerComponent.html@14:7, No provider for NgControl (" "): ng:///DynamicTestModule/CustomerComponent.html@18:7, No provider for NgControl (" <mat-e"): ng:///DynamicTestModule/CustomerC ... Error: Template parse errors: at <Jasmine> at syntaxError node_modules/@angular/compiler/esm5/compiler.js:486:22) at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse node_modules/@angular/compiler/esm5/compiler.js:24674:1) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate node_modules/@angular/compiler/esm5/compiler.js:34629:1) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate node_modules/@angular/compiler/esm5/compiler.js:34604:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34505:48 at <Jasmine> at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents node_modules/@angular/compiler/esm5/compiler.js:34505:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34393:1 at Object.then node_modules/@angular/compiler/esm5/compiler.js:475:33) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndAllComponents node_modules/@angular/compiler/esm5/compiler.js:34391:1) Expected undefined to be truthy. at <Jasmine> at UserContext.<anonymous> src/app/configurator/configurator.component.spec.ts:90:26) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1) at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/proxy.js:128:1) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:387:1) Chrome 66.0.3359 (Mac OS X 10.13.4): Executed 1 of 1 (1 FAILED) (0 secs / 0 secs) Chrome 66.0.3359 (Mac OS X 10.13.4) configurator component unit tests has a configurator FAILED </div> [ERROR ->]<form *ngIf="!loading" class="form" [formGroup]="options"> <mat-form-field> <form *ngIf="!loading" class="form" [formGroup]="options"> <mat-form-field> <mat-form-field> [ERROR ->]<input matInput #input placeholder="{{'customer.lastname' | translate}}" formControlName="lastname"> <mat-form-field> [ERROR ->]<input matInput placeholder="{{'customer.email' | translate}}" formControlName="email"> error properties: Object({ ngSyntaxError: true, ngParseErrors: [ No provider for ControlContainer (" <input matIn"): ng:///DynamicTestModule/CustomerComponent.html@12:5, No provider for NgControl (" [ERROR ->]<input matInput #input placeholder="{{'customer.firstname' | translate}}" formControlName="firstname""): ng:///DynamicTestModule/CustomerComponent.html@14:7, No provider for NgControl (" "): ng:///DynamicTestModule/CustomerComponent.html@18:7, No provider for NgControl (" <mat-e"): ng:///DynamicTestModule/CustomerC ... Error: Template parse errors: at <Jasmine> at syntaxError node_modules/@angular/compiler/esm5/compiler.js:486:22) at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse node_modules/@angular/compiler/esm5/compiler.js:24674:1) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate node_modules/@angular/compiler/esm5/compiler.js:34629:1) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate node_modules/@angular/compiler/esm5/compiler.js:34604:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34505:48 at <Jasmine> at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents node_modules/@angular/compiler/esm5/compiler.js:34505:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34393:1 at Object.then node_modules/@angular/compiler/esm5/compiler.js:475:33) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndAllComponents node_modules/@angular/compiler/esm5/compiler.js:34391:1) Expected undefined to be truthy. at <Jasmine> at UserContext.<anonymous> src/app/configurator/configurator.component.spec.ts:90:26) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1) at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/proxy.js:128:1) Chrome 66.0.3359 (Mac OS X 10.13.4): Executed 1 of 1 (1 FAILED) ERROR (0.838 secs / 0 secs)

I already included stuff like FormsModule and RouterTestingModule but it still does not work.

describe('configurator component unit tests', () => { let configurator: ConfiguratorComponent; let fixture: ComponentFixture<ConfiguratorComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ providers: [ ProductsService, OrdersService, UdiService, CustomersService, TranslateService, { provide: ActivatedRoute, useValue: { params: Observable.of({ id: 'test' }) } } ], declarations: [ ConfiguratorComponent, LoginComponent, ForgotpasswordComponent, ResetpasswordComponent, RegisterComponent, ContactComponent, CustomerComponent, HomeComponent, PageNotFoundComponent], imports: [ FormsModule, CommonModule, TranslateModule, MatProgressSpinnerModule, MatButtonModule, ElementsModule, ViewerModule, OrdersModule, RouterTestingModule], schemas: [NO_ERRORS_SCHEMA] }).compileComponents( ).then(() => { fixture = TestBed.createComponent(ConfiguratorComponent); configurator = fixture.componentInstance; }); }));

So I am clearly missing some module but which one? I am fairly new to angular test bed.

angular version: 5.2 karma version: 2.0.2 karma-jasmine version: 1.1.1

Oh, and it might be a duplicate of that one but since this one never got answered after the suggestions I added I thought it is okay. :S Angular2 testcase shows No provider for NgControl