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

【问题标题】：Angular 4 Lazy Loading and Routes not workingAngular 4延迟加载和路由不起作用
【发布时间】：2017-11-05 11:08:55
【问题描述】：

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

问题是这个延迟加载模块内部有一个子组件的路由。但是在我的路由器配置中，这条路线不会出现......所以当我调用惰性模块时，我的屏幕上不会显示任何内容。

这是我的路由器配置（主模块）：

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"
  }
]

你能帮帮我吗？

【问题讨论】：

您是否在控制台中看到任何错误提示未找到模块或其他内容..

标签： angular lazy-loading angular2-routing angular-module

【解决方案1】：

问题在于我在惰性模块上声明路由的方式：

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]
            }
        ]
    }
]

CalendarComponent 的 path 必须更改为：

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

到下面：

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

感谢 gitter 上的 @jotatoledo 帮助我解决了这个问题。

【讨论】：

【解决方案2】：

在你使用forChild加载路径的主路由模块中，没有任何根路由器来加载子路径。

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

那么你应该使用

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

另一个重要的事情应该记住你应该使用核心模块的** ModuleWithProviders**的延迟加载

前

惰性模块路由

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);

主模块

@NgModule({
    imports: ['ConsumerRoutingModule']
})

有一篇关于延迟加载的有趣博客： lazyload tutorial

【讨论】：