Angular 惰性模块返回空白页

我正在运行

Angular CLI 6.0.2

，并尝试对某些组件使用

Lazy Module

load

我按照文档进行了操作，并将我的

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

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

要加载的

惰性模块

设置如下：

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

 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模块ngfactory.js

，而不是

chunk.js

我尝试了不同的教程和官方文档，还使用了

ngservice--aot

，但结果相同

---

是否有任何方法可以查看组件未正确呈现并返回空白页的原因？

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

---

我应该更彻底地检查。

对不起，实际上我的惰性模块需要有路径：“”

---

我应该仔细检查一下。

TaskviewerComponent的url是

localhost:4200/tasks/tasks

。 如果您想要类似于

localhost:4200/tasks

在子路由中定义：

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

const routes:routes=[
{
路径：“”，//TaskviewerComponent的url是
localhost:4200/tasks/tasks
。
如果您想要类似于
localhost:4200/tasks
在子路由中定义：

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

const routes:routes=[
{
路径：''，//一年后，很多问题都解决了，但这个答案解决了-谢谢。一年后，很多问题都解决了，但这个答案解决了-谢谢。