Angular testing – Jasmine – Error: NG0301: Export of name ‘ngForm’ not found! Find more at …

Jasmine

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();
  });
...

https://www.mldgroup.com

Vyštudovaný top manažér pôsobiaci najmä ako manažér, marketér, softvérový inžinier, konzultant, bloger, YouTuber a zatiaľ neúspešný hudobník a producent. V rámci praxe pôsobil v rôznych odvetviach na rôznych pozíciách v malých aj veľkých firmách, vrátane spoluprác a partnerstiev s významnými firmami či poradenskými spoločnosťami.

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *