After successfully lazy loading my AccountModule, I encountered an issue when adding my SharedModule to it. All of my eagerly loaded modules seemed to be forgotten and I started receiving the following error:
The component FoodComponent is not part of any NgModule or the module has not been imported into your module.
The FoodComponent was originally being loaded and rendered correctly until I introduced the AccountModule with lazy loading. Removing this component from the app led to the same issue with the next eagerly loaded component. What is causing this behavior with my SharedModule?
shared.module.ts
// ... imports ...
@NgModule({
imports: [
CommonModule,
MaterialModule.forRoot(),
ReactiveFormsModule,
AppRoutingModule
],
declarations: [
CalNavComponent,
IngredientsListComponent,
],
exports: [
MaterialModule,
ReactiveFormsModule,
CommonModule,
AppRoutingModule,
CalNavComponent,
IngredientsListComponent,
],
providers: [
UserDataService
],
})
export class SharedModule { }
account.module.ts
// ... imports ...
const routerConfig: Routes = [{
path: '',
component: AccountComponent
}]
@NgModule({
imports: [
SharedModule, /* Works fine when this is gone */
RouterModule.forChild(routerConfig)
],
declarations: [
AccountComponent
],
exports:[
AccountComponent
]
})
export class AccountModule { } // adding 'default' results in "cannot find module at app/features/account/account.module"
app-routing.module.ts
const routes: Routes = [
{
path: '',
redirectTo: 'food',
pathMatch: 'full'
},
{
path: 'account',
loadChildren: 'app/features/account/account.module#AccountModule'
// component: AccountComponent, /* This worked fine*/
},
{
path: 'food',
component: FoodComponent
},
//... more paths
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
constructor() { }
}