Угловой 4 ленивая загрузка и маршруты не работают

У меня есть модуль с маршрутами моего приложения. Одним из таких маршрутов является модуль ленивой загрузки.

Проблема заключается в том, что этот модуль ленивой загрузки имеет внутри маршрутов для дочерних компонентов. Но в моей конфигурации маршрутизатора эти маршруты не появляются... Поэтому, когда я вызываю ленивый модуль, ничего не показывайте на моем экране.

Вот моя конфигурация маршрутизатора (основной модуль): 

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)

Если я распечатаю конфигурацию маршрутизатора, этот маршрут declaren на моем ленивом модуле не показать: 

Routes:  [
  {
    "path": "dashboard",
    "canActivate": [
      null
    ]
  },
  {
    "path": "calendar",
    "loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",
    "canActivate": [
      null
    ]
  },
  {
    "path": "**",
    "pathMatch": "full"
  },
  {
    "path": "dashboard"
  }
]

Вы можете мне помочь?

2 4
angular-module lazy-loading angular2-routing

2 ответа:

Проблема была с тем, как я объявил свой маршрут на моем ленивом модуле: 

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 из CalendarComponent должен был измениться из: 

path: 'calendar', // wrong
component: CalendarComponent,
...

К нижеследующему: 

path: '', // right
component: CalendarComponent,
...

Спасибо @jotatoledo на gitter, которые помогли мне решить эту проблему.

7

В основном модуле маршрутизации, который вы использовали forChild для загрузки путей, нет никакого корневого маршрутизатора для загрузки дочерних объектов.

 @NgModule({
    imports: [
    RouterModule.forChild(MODULE_ROUTES)
  ]})

Вместо этого вы должны использовать 

@NgModule({
    imports: [
    RouterModule.forRoot(MODULE_ROUTES)
 ]})

Еще одна важная вещь должна быть помнить о ленивой загрузке, которую вы должны использовать * * ModuleWithProviders * * основного модуля

EX

Маршрут 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 учебник

0