Can't bind to 'ngModel' since it isn't a known property of 'input'

Question

I\'ve got the following error when launching my Angular app, even if the component is not displayed.

I have to comment out the so that my

Answer 1

I'm using Angular 5.

In my case, I needed to import RactiveFormsModule too.

app.module.ts (or anymodule.module.ts)

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

Answer 2

I upgraded from RC1 to RC5 and received this error.

I completed my migration (introducing a new app.module.ts file, changing package.json to include new versions and missing modules, and finally changing my main.ts to boot accordingly, based on the Angular2 quick start example).

I did an npm update and then an npm outdated to confirm the versions installed were correct, still no luck.

I ended up completely wiping the node_modules folder and reinstalling with npm install - Voila! Problem solved.

Answer 3

import FormsModule in you app module.

it would let your application running well.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,ContactListCopmponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer 4

Sometimes even though we are already imported BrowserModule, FormsModule and other related modules still we may get the same Error.

Then I realized that we need import them in Order, which is missed in my case. So order should be like BrowserModule, FormsModule, ReactiveFormsModule.

As per my understanding, Feature Modules should follow the Basic Modules of Angular.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule     
  ],
  providers: [],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Hope this helps someone .. :)

Answer 5

if you are still getting the error after importing FormsModule correctly then check in your terminal or (windows console) because your project is not compiling (because of another error that could be anything) and your solution has not been reflected in your browser!

In my case, my console had the following unrelated error: Property 'retrieveGithubUser' does not exist on type 'ApiService'.

Answer 6

For my scenario, I had to import both [CommonModule] and [FormsModule] to my module

import { NgModule } from '@angular/core' 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }