Whistler
Whistler

Reputation: 1977

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

Before you mark it as duplicate please read:

Hi I'm learning Angular 4 with ASP.Net Core and came into this issue. I've read probably all similar issues where the solution is to add FormsModule, this doesn't work with my issue. The strange thing is when I comment out the line with ngModel and run it, it works. When I uncomment and only save in VS2017 it automatically updates application and two way binding works 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;
    };
}

Upvotes: 3

Views: 909

Answers (1)

yurzui
yurzui

Reputation: 214037

You should import FormsModule for server module as well.

According to https://github.com/MarkPieszak/aspnetcore-angular2-universal#client---everything-angular

With Angular Universal, we need to split our applicatoin logic per platform so if we look inside this folder, you'll see the 2 root files, that branch the entire logic for browser & server respectively.

  • Main.Browser.ts - This file starts up the entire Angular application for the Client/browser platform. Here we setup a few things, client Angular bootstrapping.

You'll barely need to touch this file, but something to note, this is the file where you would import libraries that you only want being used in the Browser. (Just know that you'd have to provide a mock implementation for the Server when doing that).

  • Main-Server.ts - This file is where Angular platform-server serializes the Angular application itself on the .NET server within a very quick Node process, and renders it a string. This is what causes that initial fast paint of the entire application to the Browser, and helps us get all our SEO goodness

Upvotes: 3

Related Questions