Erro não detectado: Módulo inesperado 'FormsModule' declarado pelo módulo 'AppModule'. Adicione uma anotação @ Pipe / @ Directive / @ Component

Sou novo no Angular. Comecei o Tour of Heroes para aprender. Então, eu fui criado app.componentcom two-wayligação.

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

Seguindo o tutorial, importei FormsModule e adicionei-o ao array de declarações. O erro apareceu nesta etapa:

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

Aqui está o erro:

Erro não detectado: Módulo inesperado 'FormsModule' declarado pelo módulo 'AppModule'. Adicione uma anotação @ Pipe / @ Directive / @ Component.

FormsModuledeve ser adicionado em imports arraynão declarations array.

• importações matriz é de importação de módulos, tais como BrowserModule, FormsModule,HttpModule
• variedade declarações é para o seu Components, Pipes,Directives

consulte a mudança abaixo:

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

Adicionar FormsModuleem Imports Array.
ie

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

Ou isso pode ser feito sem usar [(ngModel)], usando

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

ao invés de

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

Remova o FormsModule da declaração: [] e adicione o FormsModule nas importações: []

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

Coisas que você pode adicionar declarations: [] in modules

• Tubo
• Diretriz
• Componente

Dica profissional : a mensagem de erro explica isso -Please add a @Pipe/@Directive/@Component annotation.