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]
})