So basically I am trying to create a lazy loaded feature module in my application I have been following the official angular docs - but for some reason its not working.
I have set up my feature module DashboardModule as shown below
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// MODULES
import { DashboardRoutingModule } from './dashboard-routing.module';
// COMPONENTS
import { DashboardComponent } from './dashboard/dashboard.component';
import { DashboardAlertComponent } from './dashboard-alert/dashboard-alert.component';
import { DashboardSummaryComponent } from './dashboard-summary/dashboard-summary.component';
import { DashboardTasksComponent } from './dashboard-tasks/dashboard-tasks.component';
import { HoldingPageComponent } from './holding-page/holding-page.component';
@NgModule({
imports: [CommonModule, DashboardRoutingModule],
declarations: [
DashboardComponent,
DashboardAlertComponent,
DashboardSummaryComponent,
DashboardTasksComponent,
HoldingPageComponent,
]
})
export class DashboardModule {}
then in my DashboardRoutingModule
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ActivityComponent } from '../activity-components/activity/activity.component';
import { IsLockedRouteGuard } from '@app/shared/common/auth/is-locked-route-guard';
import { DashboardSummaryComponent } from './dashboard-summary/dashboard-summary.component';
import { SyncComponent } from '@app/popup-components/sync/sync.component';
import { DashboardAlertComponent } from './dashboard-alert/dashboard-alert.component';
import { ChartContainerComponent } from '../chart-components/chart-container/chart-container.component';
import { DashboardTasksComponent } from './dashboard-tasks/dashboard-tasks.component';
@NgModule({
imports: [
RouterModule.forChild([
{ path: 'activity', component: ActivityComponent, canActivate: [IsLockedRouteGuard] },
{ path: 'snapshot', component: DashboardSummaryComponent },
{ path: 'sync', component: SyncComponent },
{
path: 'alerts',
component: DashboardAlertComponent,
canActivate: [IsLockedRouteGuard]
},
{ path: 'charts', component: ChartContainerComponent, canActivate: [IsLockedRouteGuard] },
{ path: 'tasks/:sort', component: DashboardTasksComponent, canActivate: [IsLockedRouteGuard] },
])
],
exports: [RouterModule]
})
export class DashboardRoutingModule {}
so as per the angular docs this has been set up correctly..
now in my AppRoutingModule
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRouteGuard } from './shared/common/auth/auth-route-guard';
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'app',
component: AppComponent,
children: [
{
path: '',
children: [{ path: '', redirectTo: '/dashboard/alerts', pathMatch: 'full' }]
},
{
path: 'main',
canActivate: [AppRouteGuard],
loadChildren: () => import('./main/main.module').then(m => m.MainModule),
data: { preload: true }
},
{
path: 'dashboard',
loadChildren: () => import('./main/dashboard/dashboard.module').then(m => m.DashboardModule)
},
]
}
])
],
exports: [RouterModule]
})
export class AppRoutingModule {}
but whats happening is when I try and go to /dashboard.. I get this error
Component HoldingPageComponent is not part of any NgModule or the module has not been imported into your module.
but I am clearly importing it in the DashboardModule as shown above.. what am I doing wrong??
Thanks
i don't see
RouterModule.forRoot
i think you should use it in AppRoutingModule instead of
RouterModule.forChild
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.