Here is a sample code snippet of a component:
export class BaseFormComponent implements OnInit {
basicFormGroup: FormGroup;
constructor(
protected basicProviderService: BasicProviderService,
protected formBuilder: FormBuilder,
protected dialog: MatDialog,
protected spinner: NgxSpinnerService
) {
this.basicFormGroup = this.formBuilder.group({
name:[''],
note: ['', Validators.required],
description: ['', Validators.required]
});
}
}
Below is the template code for the component:
<h3><span>Basic form data</span></h3>
<mat-divider></mat-divider>
<form *ngIf="true" [formGroup]="basicFormGroup">
<!-- content omitted-->
</form>
A test scenario has been created as shown below:
fdescribe('BasicFormComponent', () => {
let component: BasicFormComponent;
let fixture: ComponentFixture<BasicFormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [BasicFormComponent],
imports: [
FormsModule,
MatDialogModule,
MatAutocompleteModule,
MatSnackBarModule,
MatExpansionModule,
MatStepperModule,
MatFormFieldModule,
TextFieldModule,
MatInputModule,
MatDatepickerModule,
MatNativeDateModule,
MatListModule,
MatSelectModule,
HttpClientTestingModule,
RouterTestingModule,
BrowserAnimationsModule,
CoreModule
],
providers: [
{ provide: BasicProviderService, useClass: BasicProviderServiceStub }
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BasicFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
An error occurs during testing when the createComponent method is called:
HeadlessChrome 80.0.3987 (Windows 10.0): BasicFormComponent should create FAILED
Error: NodeInjector: NOT_FOUND [ControlContainer]
// Error details omitted for brevity
Expected undefined to be truthy.
// More error logs here
HeadlessChrome 80.0.3987 (Windows 10.0.0): Executed 1 of 181 (1 FAILED) (0 secs / 0.293 secs)
Several troubleshooting steps were attempted:
- Test succeeds with
ngIf='false', but fails with any form element present - Replacing
[formGroup]='basicFormGroup'with[formGroup]='undefined'causes the test to fail
The culprit might be related to missing dependencies in the app.module.ts file.
The issue seems to revolve around the application not being able to locate the necessary forms abstraction.
What could potentially trigger this problem?