I've been facing an issue while testing an angular component with multiple dependencies. The test case fails with the error: "No Provider for NgControl". Here's the detailed error message:
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)
...
I have already included FormsModule and RouterTestingModule, but the issue persists.
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: [...],
imports: [...],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents(
).then(() => {
fixture = TestBed.createComponent(ConfiguratorComponent);
configurator = fixture.componentInstance;
});
}));
It seems like there's still a missing module that I need to include in my testing bed setup. Any suggestions on which one I might be overlooking? I'm relatively new to Angular testing environments.
Angular version: 5.2 Karma version: 2.0.2 karma-jasmine version: 1.1.1
Additionally, although it may resemble another unanswered question, I believe adding more context to mine makes it valid. Angular2 testcase shows No provider for NgControl