I've created an AccountModule
that successfully lazy loads, but when I add my SharedModule
to the AccountModule
my app seems to forget all of my eagerly loaded modules and I get the error:
Component FoodComponent is not part of any NgModule or the module has not been imported into your module.
Where FoodComponent
is an eagerly loaded component that both loaded and rendered correctly before calling for the AccountModule
via lazy load. If I remove that component fro the app, then the next eagerly loaded component send the same issue. What is it about my SharedModule
that is making this happen?
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() { }
}
AppRoutingModule
from shared? Not saying that is the issue, but it is very suspect code. – Aluan Haddad Jan 2 at 18:57AppModule
alone. I'll put together the answer. – Nate May Jan 2 at 19:34