title: Angular 2: "Can't bind to 'ngModel'" error when FormsModule is imported in app.module
body: <p>I've been stuck at the data binding part of this tutorial since yesterday
  <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt1.html" rel="nofollow">https://angular.io/docs/ts/latest/tutorial/toh-pt1.html</a></p>
  
  <p>I've been getting this error</p>
  
  <blockquote>
    <p>Unhandled Promise rejection: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
                    
                        name: 
                        ][(ngModel)]="hero.name" placeholder="name">
                    "): AppComponent@5:12 ; Zone:  ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
                    
                        name: 
                        ][(ngModel)]="hero.name" placeholder="name">
                    "): AppComponent@5:12</p>
  </blockquote>
  
  <p>I looked at my code side by side with the code on the page and even copied their code to see if I noticed any difference anywhere when I pasted it, sure enough it was the exact same, and this error still occurred.</p>
  
  <p>About 98% of the information I found on this problem happened to be based around them forgetting to import the FormsModule, this isn't the case with me.  I even tried importing it into the other .ts files just to see if anything happens and it didn't fix the problem.</p>
  
  <p>I came across another one that mentioned the angular/forms dependency had to be 0.3.0 or above, I checked the package file and seen I'm using 2.1.1</p>
  
  <p>I installed Node last year and haven't really messed with it until now, I have windows Vista so I couldn't get the newest one and my version is 5.7.0 and I'm using npm 3.6.0</p>
  
  <p>Here's my code</p>
  
  <p>main.ts</p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app.module';
  
  const platform = platformBrowserDynamic();
  platform.bootstrapModule(AppModule);
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule }   from '@angular/forms';
  
  import { AppComponent }  from './app.component';
  
  
  
  
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule
    ],
     declarations: [
      AppComponent
    ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.componet.ts</p>
  
  <pre><code> import { Component } from '@angular/core';
  
   export class Hero {
      id: number;
      name: string;
  
      }
  
  
  
  @Component({
  
       selector: 'my-app',
       template: `&lt;h1&gt;{{title}}&lt;/h1&gt;
                  &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;
                  &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{hero.id}}&lt;/div&gt;
                 &lt;div&gt;
                  &lt;label&gt;name: &lt;/label&gt;
                  &lt;input [(ngModel)]="hero.name" placeholder="name"&gt;
                 &lt;/div&gt;`
  })
  
  export class AppComponent {
      title   =   'Tour of Heroes';
      hero: Hero = {
      id: 1,
      name: 'Windstorm'
      };
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
   &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Angular QuickStart&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;!-- 1. Load libraries --&gt;
       &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;!-- 2. Configure SystemJS --&gt;
       &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
       &lt;script&gt;
        System.import('app').catch(function(err){ console.error(err); });
      &lt;/script&gt;
     &lt;/head&gt;
    &lt;!-- 3. Display the application --&gt;
    &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "angular-quickstart",
    "version": "1.0.0",
    "scripts": {
      "start": "tsc &amp;&amp; concurrently \"tsc -w\" \"lite-server\" ",
      "lite": "lite-server",
      "tsc": "tsc",
      "tsc:w": "tsc -w"
    },
    "licenses": [
      {
        "type": "MIT",
        "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
       }
    ],
    "dependencies": {
      "@angular/common": "~2.1.1",
      "@angular/compiler": "~2.1.1",
      "@angular/core": "~2.1.1",
      "@angular/forms": "~2.1.1",
      "@angular/http": "~2.1.1",
      "@angular/platform-browser": "~2.1.1",
      "@angular/platform-browser-dynamic": "~2.1.1",
      "@angular/router": "~3.1.1",
      "@angular/upgrade": "~2.1.1",
      "angular-in-memory-web-api": "~0.1.13",
      "bootstrap": "^3.3.7",
      "core-js": "^2.4.1",
      "reflect-metadata": "^0.1.8",
      "rxjs": "5.0.0-beta.12",
      "systemjs": "0.19.39",
      "zone.js": "^0.6.25"
    },
    "devDependencies": {
      "@types/core-js": "^0.9.34",
      "@types/node": "^6.0.45",
      "concurrently": "^3.0.0",
      "lite-server": "^2.2.2",
      "typescript": "^2.0.3"
    }
  }
  </code></pre>
  
  <p>I don't know if the .js files they render when node stars makes a difference but I'm figuring that might be overkill at the moment, if this doesn't show the problem and you guys want to have a look let me know and I'll include them.</p>