Question

我正在运行Angular CLI 6.0.2并尝试对某些组件使用Lazy Module加载。

我已按照文档操作并配置了app.module，如下所示：

    const appRoutes: Routes = [
  {
    path      : '',
    component: LoginComponent
  },
    {
        path      : 'main',
        component: FuseMainComponent,
      canActivate: [AuthguardService]
    },
  {
    path      : 'appqos',
    component: AppqosComponent,
    canActivate: [AuthguardService]
  },
  {
    path      : 'tasks',
    // component: TaskviewerComponent,
    // canActivate: [AuthguardService]
    loadChildren: './taskviewer/taskviewer.module#TaskviewerModule'

imports: [
...,
 RouterModule.forRoot(appRoutes)
]

要加载的lazy module设置如下：

 const routes: Routes = [
  {
    path: 'tasks',
    component: TaskviewerComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatSortModule,
    MatChipsModule,
    MatCheckboxModule,
    MatSelectModule,
    NgxDatatableModule,
    MatButtonModule,
    MatTooltipModule,
    RouterModule.forChild(routes)

  ],
  declarations: [TaskviewerComponent],
  exports: [
    TaskviewerComponent, RouterModule
  ]

})
export class TaskviewerModule { }

当我浏览“任务”路线时，组件显示为空白页面。我没有在控制台中看到任何错误。在网络标签中，它只显示加载文件taskviewer-taskviewer-module-ngfactory.js而不是chunk.js

我尝试了不同的教程和官方文档以及使用ng serve --aot，但它产生了相同的结果。

有没有办法看到为什么组件没有正确渲染并返回空白页？

Answer 1

TaskviewerComponent的网址为localhost:4200/tasks/tasks。如果你想要像localhost:4200/tasks这样的话在子路径中定义：

const routes: Routes = [
  {
    path: '', // <-- no name path here
    component: TaskviewerComponent
  }
];

查看 app-routing.module.ts 中的https://hyperledger-fabric.readthedocs.io/en/release-1.1/txflow.html#和 crisis-center-routing.module.ts ，了解如何获取默认路由延迟加载的模块。

Answer 2

很抱歉，实际上我的懒人模块需要有路径：''

我应该更彻底地检查一下。

延迟模块返回空白页面

2 个答案: