惰性模块 returns 空白页

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

当我浏览到 'tasks' 路径时，组件显示为空白页面。我在控制台中没有看到任何错误。在网络选项卡中，它只是显示它正在加载文件 taskviewer-taskviewer-module-ngfactory.js 而不是 chunk.js

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

有什么方法可以查看组件未正确呈现并返回空白页面的原因吗？

Answer 1

抱歉，实际上我的惰性模块需要有路径：''

我应该检查得更彻底。

Answer 2

TaskviewerComponent 的 url 是 localhost:4200/tasks/tasks。如果你想要 localhost:4200/tasks 在子路由中定义：

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

看看 https://angular.io/guide/router#lazy-loading-route-configuration 在 app-routing.module.ts 和 crisis-center-routing.module.ts了解如何为延迟加载模块设置默认路由。

惰性模块 returns 空白页

Lazy Module returns blank page

lazy-loading

angular