0

I've been stuck at the data binding part of this tutorial since yesterday https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

I've been getting this error

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

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.

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.

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

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

Here's my code

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts

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 { }

app.componet.ts

 import { Component } from '@angular/core';

 export class Hero {
    id: number;
    name: string;

    }



@Component({

     selector: 'my-app',
     template: `<h1>{{title}}</h1>
                <h2>{{hero.name}} details!</h2>
                <div><label>id: </label>{{hero.id}}</div>
               <div>
                <label>name: </label>
                <input [(ngModel)]="hero.name" placeholder="name">
               </div>`
})

export class AppComponent {
    title   =   'Tour of Heroes';
    hero: Hero = {
    id: 1,
    name: 'Windstorm'
    };
}

index.html

<!DOCTYPE html>
 <html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
   </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && 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"
  }
}

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.

Evan Carroll
  • 78,363
  • 46
  • 261
  • 468
Optiq
  • 2,835
  • 4
  • 33
  • 68

1 Answers1

1

your app module should be something like this:

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 { }
Houtan
  • 403
  • 2
  • 5