Yakalanmamış Hata: 'AppModule' modülü tarafından bildirilen beklenmedik modül 'FormsModule'. Lütfen bir @ Pipe/@ Directive/@ Component ek açıklaması ekleyin

Question

Angular 'da yeniyim. Öğrenmek için Kahramanlar Turuna başladım. Yani app.component, two-way bağlayıcı ile oluşturuldu. I FormsModule içe ve beyanlar diziye eklenen öğretici sonra

import { Component } from '@angular/core'; 
export class Hero { 
    id: number; 
    name: string; 
} 
@Component({ 
    selector: 'app-root', 
    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> 
    `, 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'Tour of Heroes'; 
    hero: Hero = { 
     id: 1, 
     name: 'Windstorm' 
    }; 
} 

. Hata bu adımda çıktı:

Uncaught Error: Unexpected module 'FormsModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

Answer 1

FormsModuleimports array değil declarations array de eklenmelidir:

İşte

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { FormsModule } from '@angular/forms'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     FormsModule 
    ], 
    imports: [ 
    BrowserModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

hatadır.

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 

: Components, Pipes,

Directives değişim aşağıya bakın sizin

• ithalat dizisi, böyle BrowserModule, FormsModule olarak ithal modülleri için dizi içindir HttpModule
• bildirimleri ise

Answer 2

Imports Array öğesinde FormsModule ekleyin.
yani

@NgModule({ 
declarations: [ 
AppComponent 
], 
imports: [ 
BrowserModule, 
FormsModule 
], 
providers: [], 
bootstrap: [AppComponent] 
}) 

Ya da bu bir "modül" var yerine

<input [(ngModel)]="hero.name" placeholder="Name">