Uncaught Error Unexpected module FormsModule declared by the module AppModule Please add a Pipe Directive Component annotation

Question

I m new in Angular  I started Tour of Heroes to learn it  So  I am created an app component with two-way binding    import   Component   from   angular core   export class Hero       id  number      name  string     Component       selector   app-root       template             lt h1 gt   title   lt  h1 gt           lt h2 gt   hero name    details  lt  h2 gt           lt div gt  lt label gt id   lt  label gt   hero id   lt  div gt           lt div gt  lt label gt Name   lt  label gt               lt input   ngModel    hero name  placeholder  Name  gt           lt  div gt             styleUrls      app component css      export class AppComponent       title    Tour of Heroes       hero  Hero             id  1          name   Windstorm             Following the tutorial I imported FormsModule and added it into declarations array  Error appeared at this step   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       Here is error       Uncaught Error  Unexpected module  FormsModule  declared by the module  AppModule   Please add a  Pipe  Directive  Component annotation

User · Answer

Add FormsModule in Imports Array i e   NgModule   declarations    AppComponent    imports    BrowserModule  FormsModule    providers      bootstrap   AppComponent       Or this can be done without using   ngModel   by using   lt input  value   hero name   input   hero name  event target value  placeholder  name  gt    instead of   lt input   ngModel    hero name  placeholder  Name  gt

User · Answer

Things you can add to declarations     in modules  Pipe Directive Component  Pro Tip  The error message explains it - Please add a  Pipe  Directive  Component annotation

User · Answer

Remove the FormsModule from Declaration    and Add the FormsModule in imports      NgModule     declarations        AppComponent        imports        BrowserModule      FormsModule        providers        bootstrap   AppComponent

User · Answer

FormsModule should be added at imports array not declarations array    imports array is for importing modules such as BrowserModule  FormsModule  HttpModule declarations array is for your Components  Pipes  Directives   refer below change    NgModule     declarations        AppComponent        imports        BrowserModule      FormsModule        providers        bootstrap   AppComponent

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

Examples related to angular