title: Angular CLI - Please add a @NgModule annotation when using latest
body: <p><strong>note:</strong> I'm new to Angular, so please excuse any new comer stupidity here.</p>
  
  <p><strong>Details</strong></p>
  
  <ul>
  <li>I've installed the latest version of Angular CLI</li>
  <li>The default app loads and runs perfectly fine after 'ng serve'</li>
  </ul>
  
  <p><strong>Issue</strong></p>
  
  <ul>
  <li>I decided to create a new module an import it into the app module </li>
  <li>This is something I've done a couple of times in Angular 2 and it's worked perfectly fine</li>
  <li>However, since I ran the latest version of Angular CLI this morning, importing a module breaks and I receive the following error:</li>
  </ul>
  
  <blockquote>
    <p>compiler.es5.js:1689 Uncaught Error: Unexpected directive 'ProjectsListComponent' imported by the module 'ProjectsModule'. Please add a @NgModule annotation.</p>
  </blockquote>
  
  <p><strong>App Module</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 { }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Projects Module</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>Any help with this one would be massssssively appreciated as I've hit a brick wall with my understanding of it all.</p>
  
  <p>Thank you.</p>