title: Angular 2: Can't bind to 'ngModel' even though FormsModule is imported
body: <p>I am getting the <code>Can't bind to 'ngModel' since it isn't a known property of 'input'.</code> error, though I have imported the <code>FormsModule</code>.</p>
  
  <p>package.json:</p>
  
  <pre><code>"@angular/common": "2.0.0",
      "@angular/compiler": "2.0.0",
      "@angular/core": "2.0.0",
      "@angular/forms": "^2.0.0",
  </code></pre>
  
  <p>In main app.module:</p>
  
  <pre><code>import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  ...
  @NgModule({
    bootstrap: [App],
    declarations: [
      App
    ],
    imports: [ // import Angular's modules
      BrowserModule,
      HttpModule,
      RouterModule,
      FormsModule,
      ReactiveFormsModule,
      NgaModule,
      PagesModule,
      routing
    ]
  </code></pre>
  
  <p>Here's where I route to the component (pages.routes.ts):</p>
  
  <pre><code>import { NewProjectModule, BasicForm } from './new-project/new-project.module';
  ...
  { path: 'new-project', component: BasicForm },
  </code></pre>
  
  <p>Here is the component module:</p>
  
  <pre><code>import { FormsModule } from '@angular/forms';
  ...
  import { BasicForm } from './basicForm.component';
  ...
  export { BasicForm } from './basicForm.component';
  
  @NgModule({
    imports: [CommonModule, FormsModule, BrowserModule],
    exports: [BasicForm],
    declarations: [BasicForm]
  })
  export default class NewProjectModule {
  }
  </code></pre>
  
  <p>Also imported FormsModule into component just for good measure:</p>
  
  <pre><code>import {Component} from '@angular/core';
  import { FormsModule } from '@angular/forms';
  
  @Component({
    selector: 'basic-form',
    template: `
  &lt;input type="text" class="form-control" id="directory" placeholder="C:\Users\Matt\Documents\Projects" [(ngModel)]="project.directory"&gt;
    `
  })
  </code></pre>
  
  <p>Error is thrown on the above template line.</p>