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

import { BrowserModule } from '@angular/platform-browser';  import { NgModule } from '@angular/core';  import { AppComponent } from './app.component';  import { AngularFireModule } from 'angularfire2';  import { AngularFireDatabaseModule } from 'angularfire2/database';  import { AngularFireAuthModule } from 'angularfire2/auth';  import { environment } from '../environments/environment';  import { ProjectsModule } from './projects/projects.module';  import { HttpModule } from '@angular/http';      @NgModule({    imports: [      BrowserModule,      HttpModule,      ProjectsModule,      AngularFireModule.initializeApp(environment.firebase, 'AngularFireTestOne'), // imports firebase/app needed for everything      AngularFireDatabaseModule, // imports firebase/database, only needed for database features      AngularFireAuthModule // imports firebase/auth, only needed for auth features    ],      declarations: [AppComponent],      bootstrap: [AppComponent]    })    export class AppModule { }

Projects Module

import { BrowserModule } from '@angular/platform-browser';  import { NgModule } from '@angular/core';  import { ProjectsListComponent } from './projects-list.component';  import { RouterModule } from '@angular/router';    @NgModule({        declarations: [          ProjectsListComponent      ],        imports: [      BrowserModule,      ProjectsListComponent,      RouterModule.forChild([        { path: 'projects', component: ProjectsListComponent }      ])    ]  })    export class ProjectsModule { }

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.

Answer 1

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