Angular 4: Cannot bind with 'ngModel' as it is not a known property of 'input'

Before you mark it as duplicate, read:

Hi I am learning Angular 4 with ASP.Net Core and came to this problem. I have read probably all similar problems where the solution is to add FormsModule

, this does not work with my problem. The weird thing is, when I comment out the line with ngModel and run it, it works. When I uncomment and save in VS2017 only, it automatically refreshes the app and does two-way binding until I refresh the page.

app.module.client.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';


@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ...sharedConfig.imports
],
providers: [
    { provide: 'ORIGIN_URL', useValue: location.origin }
]
})
export class AppModule {
}

      

        
        
        
      

    

app.component.html:

<h1>{{title}}</h1>
<div *ngIf="selectedhero">
    <h2>{{selectedhero.name}} details!</h2>
    <div><label>id: </label>{{selectedhero.heroNo}}</div>
    <div>
        <label>name: </label>
        <input [(ngModel)]="selectedhero.name" placeholder="name">
    </div>
</div>

<div class='container'>
    <router-outlet></router-outlet>
</div>

<h2>heros</h2>
<ul class="heros">
    <li *ngFor="let hero of heros"
        [class.selected]="hero === selectedhero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.name}}</span> hero {{hero.heroNo}}
    </li>
</ul>

      

        
        
        
      

    

app.component.ts:

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

export class hero {
    lineId: number;
    heroNo: number;
    name: string;
    statusCode: number;
}

const HEROS: hero[] = [
    { lineId: 2, heroNo: 1, name: '1', statusCode: 5 },
    { lineId: 2, heroNo: 2, name: '2', statusCode: 5 },
    { lineId: 2, heroNo: 3, name: '3', statusCode: 5 },
    { lineId: 2, heroNo: 4, name: '4', statusCode: 5 },
    { lineId: 2, heroNo: 5, name: '5', statusCode: 5 },
    { lineId: 2, heroNo: 6, name: '6', statusCode: 5 },
    { lineId: 2, heroNo: 7, name: '7', statusCode: 5 },
    { lineId: 2, heroNo: 8, name: '8', statusCode: 5 },
    { lineId: 2, heroNo: 9, name: '9', statusCode: 5 },
    { lineId: 2, heroNo: 10, name: '10', statusCode: 5 },
    { lineId: 2, heroNo: 11, name: '11', statusCode: 5 },
    { lineId: 2, heroNo: 12, name: '12', statusCode: 5 }
];

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'My Heroes';
    heros = HEROS;
    selectedhero : hero;
    onSelect(hero: hero): void {
        this.selectedhero = hero;
    };
}