Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it’s suited for websites, Node.js projects, or anywhere that JavaScript can run.
Full error message
Error: NG0301: Export of name ‚ngForm‘ not found! Find more at https://angular.io/errors/NG0301.
How to reproduce it
form.component.html
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
<input type="text" [(ngModel)]="customerName" name="name" />
<input type="text" [(ngModel)]="customerAge" name="age" />
<button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>
form.component.spec.ts
...
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ FormComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(Form01Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
...Error message:
error properties: Object({ code: -301 })
at cacheMatchingLocalNames (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:11219:23)
at resolveDirectives (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:10967:13)
at elementStartFirstCreatePass (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13659:27)
at ɵɵelementStart (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13699:9)
at templateFn (ng:///FormComponent.js:10:9)
at executeTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:10534:9)
at renderView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:10356:13)
at renderComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:11529:5)
at renderChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:10216:9)
at renderView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:10381:13)
Solution
Add imports : [] and import FormsModule
form.component.spec.ts
...
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ FormComponent ],
imports: [ FormsModule ]
})
.compileComponents();
fixture = TestBed.createComponent(Form01Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
...
