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.

Nonresistant

why are you using a project module ? – Tangential

Hi Rahul. I plan to build a solution with components related to projects and components related to issues. I plan to segregate those into a "ProjectsModule" and an "IssuesModule". In this initial test, I got as far as adding my "ProjectsModule" only to find it doesn't work as usual... – Nonresistant

Try to import the 'ProjectsListComponent' into your App Module under declarations – Alms

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

Archduchy

Hi Pierre, thank you so much for such a detailed response. What's 'AOT compatible'? (if you don't mind answering that here) ...(I can accept the answer in two minutes :) ) – Nonresistant

AoT = Ahead of Time (angular.io/guide/aot-compiler). In-lining (not breaking into exportable pieces) will prevent angular from being able to perform AoT - which means you will miss out on the big performance gain that AoT gives @Nonresistant – Appendicular

Works in Angular 8. – Leucite

Answer 2

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.

Significance