note: I'm new to Angular, so please excuse any new comer stupidity here.
Details
Issue
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';_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 { }Projects Module
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 { }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.
This question is related to
angular
typescript
angular-cli
angularjs-ng-model
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 }
]
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.
Source: Stackoverflow.com