angular - the - Error no capturado: módulo inesperado ''FormsModule'' declarado por el módulo ''AppModule''. Agregue una anotación @ Pipe/@ Directiva/@ Componente

please add a @pipe/@directive/@component annotation. ionic

Question

Soy nuevo en Angular. Comencé Tour of Heroes para aprenderlo. Por lo tanto, he creado un app.component con enlace two-way .

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''
    };
}

Siguiendo el tutorial importé FormsModule y lo agregué a la matriz de declaraciones. El error apareció en este paso:

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

Aquí hay un error:

Error no capturado: módulo inesperado ''FormsModule'' declarado por el módulo ''AppModule''. Agregue una anotación @ Pipe / @ Directiva / @ Componente.

Answer 1

Agregue FormsModule en la matriz de importaciones.
es decir

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

O esto se puede hacer sin usar [(ngModel)] usando

<input [value]=''hero.name'' (input)=''hero.name=$event.target.value'' placeholder="name">

en vez de

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

Answer 2

Elimine el FormsModule de la Declaración: [] y agregue el FormsModule en las importaciones: []

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

Answer 3

FormsModule debe agregarse en la imports array no en la declarations array .

• Importar matriz es para importar módulos como BrowserModule , FormsModule , HttpModule
• El conjunto de declaraciones es para sus Components , Pipes , Directives

consulte a continuación el cambio:

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