我有一个包含我的应用路线的模块。其中一条路线是延迟加载模块。
问题是这个延迟加载模块内部有子组件的路由。但是在我的路由器配置中,这条路线没有出现......所以当我打电话给懒人模块时,我的屏幕上没有显示任何内容。
这是我的路由器配置(主模块):
export const MODULE_ROUTES: Route[] =[
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'calendar', loadChildren: 'app/dashboard/calendar/calendar-module.module#CalendarModuleModule',canActivate: [AuthGuard]},
{ path: '**', component: NoPageFoundComponent, pathMatch: 'full' }
]
.
.
.
@NgModule({
imports: [
RouterModule.forChild(MODULE_ROUTES)
.
.
.
在我懒惰的模块上:
export const MODULE_CALENDAR_ROUTES: Route[] = [
{
path: 'calendar', component: CalendarComponent, canActivateChild: [AuthGuard, CalendarGuard],
children: [
{
path: '', component: MainCalendarComponent, canActivateChild: [AuthGuard, CalendarGuard]
},
{
path: 'user', component: EditEventComponent, canActivateChild: [AuthGuard, CalendarGuard]
}
]
}
]
.
.
.
@NgModule({
imports: [
SharedModule,
.
.
.
RouterModule.forChild(MODULE_CALENDAR_ROUTES)
如果我打印我的路由器配置,我的懒惰模块上的路由声明不会显示:
Routes: [
{
"path": "dashboard",
"canActivate": [
null
]
},
{
"path": "calendar",
"loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",
"canActivate": [
null
]
},
{
"path": "**",
"pathMatch": "full"
},
{
"path": "dashboard"
}
]
你能帮助我吗?
答案 0 :(得分:7)
问题在于我在懒惰模块上声明路线的方式:
export const MODULE_CALENDAR_ROUTES: Route[] = [
{
path: 'calendar',
component: CalendarComponent,
canActivateChild: [AuthGuard, CalendarGuard],
children: [
{
path: '',
component: MainCalendarComponent,
canActivateChild: [AuthGuard, CalendarGuard]
},
{
path: 'user',
component: EditEventComponent,
canActivateChild: [AuthGuard, CalendarGuard]
}
]
}
]
path
的{{1}}必须改为:
CalendarComponent
到下面:
path: 'calendar', // wrong
component: CalendarComponent,
...
感谢@jotatoledo on gitter帮助我解决这个问题。
答案 1 :(得分:0)
在路由的主模块中,您已使用 forChild 加载路径,没有任何根路由器可以加载子级。
@NgModule({
imports: [
RouterModule.forChild(MODULE_ROUTES)
]})
而不是你应该使用
@NgModule({
imports: [
RouterModule.forRoot(MODULE_ROUTES)
]})
另一个重要的事情是应该记住你应该使用的延迟加载**模块的ModuleWithProviders **
Lazymodule路线
import { NgModule, ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [{
path: '',
component: ConsumerComponent,
children: [{
path: '',
component: DashboardComponent
}]
export const ConsumerRoutingModule: ModuleWithProviders = RouterModule.forChild(routes);
main_module
@NgModule({
imports: ['ConsumerRoutingModule']
})
有一篇关于延迟加载的有趣博客: lazyload tutorial