I'm facing an issue with Lazy Loading in Angular. I have a module called ShopCartModule that needs to be implemented using Lazy Loading.
In addition to the ShopCartModule, I also have the AppModule and the CoreModule.
This is my AppModule:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
CoreModule,
ShopCartModule,
HttpClientModule,
FormsModule,
SharedModule,
AboutModule,
ContactModule,
NgbModule.forRoot()
],
providers: [
NgbActiveModal
],
bootstrap: [AppComponent],
})
export class AppModule {
}
And this is my CoreModule:
@NgModule({
imports: [
CommonModule,
AppRoutingModule,
CarouselModule.forRoot(),
SharedModule,
SlickCarouselModule,
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
BrowserModule
],
exports: [
AppRoutingModule,
HeaderComponent,
FooterComponent
],
declarations: [
HeaderComponent,
HomeComponent,
FooterComponent,
LogoutComponent
],
providers: [
DataStorageService,
ProductsService,
ShopCartService,
AdminSerivice,
MessageService,
CategoryService,
ProductService,
EmailService,
AuthenticationService,
BasicAuthHtppInterceptorService,
ProductModelOrder,
{provide: HTTP_INTERCEPTORS, useClass: BasicAuthHtppInterceptorService, multi: true}
]
})
export class CoreModule {
}
I've set up the main router module named app-routing.module:
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent },
{ path: 'o-nama', component: AboutComponent},
{ path: 'kontakt', component: ContactComponent},
{ path: 'shopCart', loadChildren:'./shop-cart/shop-cart.module#ShopCartModule' },
{ path: 'administration', loadChildren: './admin/admin.module#AdminModule', canActivate: [AuthGaurdService] },
{ path: 'productsList', loadChildren: './products/products.module#ProductsModule' },
{ path: 'not-found', component: PageNotFoundComponent },
{ path: '**', redirectTo: '/not-found' }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules }),
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Lastly, here's my router module for shop-cart:
const shopCartRoutes: Routes = [
{
path: '', component: ShopCartComponent
},
]
@NgModule({
imports: [
RouterModule.forChild(shopCartRoutes)
],
exports: [
RouterModule
]
})
export class ShopCartRoutingModule{}
I encountered the following error message:
ERROR Error: Uncaught (in promise): Error: Component HomeComponent is not part of any NgModule or the module has not been imported into your module.
Despite not using HomeComponent in the module, I am unsure of what the problem might be. Everything works fine when lazy loading is not implemented.