Error: Export of name 'ngModel' not found

Question

After building my angular project i get the error: Error: Export of name 'ngModel' not found!

I have my UI running in a docker container

not even sure where to look for this. Its working fine in dev. (ng serve)

Any ideas

Answer 1

I had the same error (though in dev), it turns out that I had not added the FormsModule module to the app.module.ts file. See below:

It is also stated here along with a few more problems and their corresponding solutions

Answer 2

import FormsModule in your respective spec.ts file and app.module.ts if not

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[RouterTestingModule,HttpClientTestingModule,FormsModule],
      declarations: [ MyComponent ]
    })
    .compileComponents();
  }));

Answer 3

You need to import FormsModule in your .spec.ts and app.module.ts (if necessary) file, as per below:

import { FormsModule } from '@angular/forms';    <------ Add this code

describe('Testing Component', () => {
  ...
  ...

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ 
            FormsModule      <------ Add this code
        ]
    })
    .compileComponents();
  }));

  ...
  ...

Answer 4

Another possible issue: if you're using template form validation When you set #name="ngModel" on a form field without [(ngModel)] directive

E.g.

<input required [value]="hero.name" (change)="setHeroName($event)" #name="ngModel" >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
  class="alert alert-danger">Error</div>

=> Error: Export of name 'ngModel' not found

Fixed by replacing

[value]="hero.name" (change)="setHeroName($event)"

by

[(ngModel)]="hero.name"

Answer 5

I know the question is pretty old, but i had the same problem and want to help people who maybe have the same issue.

So my mistake was, that i forgot to add the ngModel to the input as attribute like so:

Before:

<input type="text" name="email" required email #emailCtrl="ngModel"></input>

After:

<input type="text" ngModel name="email" required email #emailCtrl="ngModel"></input>

Answer 6

I had a template variable called ngModel. Not sure what affect this had, but removing seemed to fix it.

Answer 7

If you have a form and an element within this form, the element should export a control to the parent using ngModel.

<form (ngSubmit)= "onSubmit()" #f="ngForm">
     <input type="email" id="email" name="email" #email="ngModel">

In the above code the input element is not exporting control to the parent form element. The correct code would be:

<form (ngSubmit)= "onSubmit()" #f="ngForm">
     <input type="email" id="email" name="email" #email="ngModel">