Angular CLI - Please add a NgModule annotation when using latest

Question

note  I m new to Angular  so please excuse any new comer stupidity here   Details   I ve installed the latest version of Angular CLI The default app loads and runs perfectly fine after  ng serve    Issue   I decided to create a new module an import it into the app module  This is something I ve done a couple of times in Angular 2 and it s worked perfectly fine However  since I ran the latest version of Angular CLI this morning  importing a module breaks and I receive the following error       compiler es5 js 1689 Uncaught Error  Unexpected directive  ProjectsListComponent  imported by the module  ProjectsModule   Please add a  NgModule annotation    App Module   x000D   x000D  import   BrowserModule   from   angular platform-browser   x000D  import   NgModule   from   angular core   x000D  import   AppComponent   from    app component   x000D  import   AngularFireModule   from  angularfire2   x000D  import   AngularFireDatabaseModule   from  angularfire2 database   x000D  import   AngularFireAuthModule   from  angularfire2 auth   x000D  import   environment   from     environments environment   x000D  import   ProjectsModule   from    projects projects module   x000D  import   HttpModule   from   angular http   x000D   x000D   x000D   NgModule   x000D    imports    x000D      BrowserModule  x000D      HttpModule  x000D      ProjectsModule  x000D      AngularFireModule initializeApp environment firebase   AngularFireTestOne       imports firebase app needed for everything x000D      AngularFireDatabaseModule     imports firebase database  only needed for database features x000D      AngularFireAuthModule    imports firebase auth  only needed for auth features x000D       x000D   x000D    declarations   AppComponent   x000D   x000D    bootstrap   AppComponent  x000D   x000D     x000D   x000D  export class AppModule     x000D   x000D   x000D    Projects Module   x000D   x000D  import   BrowserModule   from   angular platform-browser   x000D  import   NgModule   from   angular core   x000D  import   ProjectsListComponent   from    projects-list component   x000D  import   RouterModule   from   angular router   x000D   x000D   NgModule   x000D   x000D      declarations    x000D          ProjectsListComponent x000D         x000D   x000D   x000D    imports    x000D      BrowserModule  x000D      ProjectsListComponent  x000D      RouterModule forChild   x000D          path   projects   component  ProjectsListComponent   x000D         x000D      x000D     x000D   x000D  export class ProjectsModule     x000D   x000D   x000D    The process I ve taken to setting the module up hasn t been any different to when I was using Angular 2  However  after having issues with compatibility between Angular Cli  firebase and angular fire  I decided to get the latest of everything this morning   Any help with this one would be massssssively appreciated as I ve hit a brick wall with my understanding of it all   Thank you

User · Answer

In my case  I created a new ChildComponent in Parentcomponent whereas both in the same module but Parent is registered in a shared module so I created ChildComponent using CLI which registered Child in the current module but my parent was registered in the shared module  So register the ChildComponent in Shared Module manually

User · Answer

The problem is the import of ProjectsListComponent in your ProjectsModule  You should not import that  but add it to the export array  if you want to use it outside of your ProjectsModule   Other issues are your project routes  You should add these to an exportable variable  otherwise it s not AOT compatible  And you should -never- import the BrowserModule anywhere else but in your AppModule  Use the CommonModule to get access to the  ngIf   ngFor   etc directives    NgModule     declarations         ProjectsListComponent        imports        CommonModule      RouterModule forChild ProjectRoutes         exports         ProjectsListComponent         export class ProjectsModule      project routes ts  export const ProjectRoutes  Routes             path   projects   component  ProjectsListComponent

[angular] Angular CLI - Please add a @NgModule annotation when using latest

Examples related to angular

Examples related to typescript

Examples related to angular-cli

Examples related to angularjs-ng-model