Angular 4延迟加载和路由不起作用

Ali*_*eño 5 lazy-loading angular-module angular2-routing angular

我有一个模块与我的应用程序的路线.其中一条路线是延迟加载模块.

问题是这个延迟加载模块内部有子组件的路由.但是在我的路由器配置上这条路线没有出现......所以当我打电话给懒人模块时,我的屏幕上没有显示任何内容.

这是我的路由器配置(主模块):

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)
.
.
.
Run Code Online (Sandbox Code Playgroud)

在我的懒惰模块上:

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)
Run Code Online (Sandbox Code Playgroud)

如果我打印我的路由器配置,我的懒惰模块上的路由声明不显示:

Routes:  [
  {
    "path": "dashboard",
    "canActivate": [
      null
    ]
  },
  {
    "path": "calendar",
    "loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",
    "canActivate": [
      null
    ]
  },
  {
    "path": "**",
    "pathMatch": "full"
  },
  {
    "path": "dashboard"
  }
]
Run Code Online (Sandbox Code Playgroud)

你能帮助我吗?

Ali*_*eño 8

问题在于我在懒惰模块上声明我的路线的方式:

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]
            }
        ]
    }
]
Run Code Online (Sandbox Code Playgroud)

pathCalendarComponent必须从改变:

path: 'calendar', // wrong
component: CalendarComponent,
...
Run Code Online (Sandbox Code Playgroud)

到下面:

path: '', // right
component: CalendarComponent,
...
Run Code Online (Sandbox Code Playgroud)

感谢@jotatoledo on gitter帮助我解决这个问题.