Angular CLI 6.0.2懒加载模块路由显示空白页求助

我之前在做Angular懒加载时也碰到过类似的空白页问题，结合你给出的配置，给你几个具体的排查步骤：

1. 修正路由层级匹配问题 #

这是最常见的懒加载错误！你的主路由配置里，tasks路径对应的懒加载模块，在子模块的路由里又写了path: 'tasks'，这意味着实际能匹配到组件的路径是/tasks/tasks，而你访问/tasks时，子模块里没有对应的路由，自然就显示空白了。

修改子模块的路由配置，把路径改成空字符串：

const routes: Routes = [
  { path: '', component: TaskviewerComponent } // 这里改成空路径
];

这样当你访问/tasks时，就会匹配到子模块里的默认路由，渲染TaskviewerComponent。

2. 检查主路由的语法完整性 #

看你贴的主路由代码，loadChildren那一行后面似乎缺少逗号，而且路由数组和imports部分的代码有截断，比如：

{ path : 'tasks', 
  // component: TaskviewerComponent, 
  // canActivate: [AuthguardService] 
  loadChildren: './taskviewer/taskviewer.module#TaskviewerModule'
// 这里应该有个逗号闭合当前路由对象
imports: [ ..., RouterModule.forRoot(appRoutes) ]

确保主路由数组是完整闭合的，语法错误可能导致路由没有正确注册，即便控制台没报错，也会影响路由匹配。

3. 简化组件模板排查自身问题 #

有时候组件的模板或样式存在隐性错误（比如某个依赖组件未导入、指令拼写错误），但控制台没输出错误信息。你可以暂时把TaskviewerComponent的模板改成最简化的内容：

<h1>Tasks Component Loaded!</h1>

然后再访问/tasks，如果能显示这段文字，说明问题出在原模板或组件逻辑里，再逐步排查原代码。

4. 验证懒加载模块的配置 #

懒加载模块不需要导出组件（因为是通过路由加载的），你的TaskviewerModule里导出了TaskviewerComponent，这虽然不会导致空白，但属于冗余配置，可以去掉。另外确保RouterModule.forChild(routes)正确导入，这部分你已经做了，没问题。

5. 暂时移除路由守卫测试 #

虽然你注释掉了canActivate，但可以完全移除这行配置，确保不是守卫逻辑里的隐性问题导致组件没加载。比如主路由里改成：

{ path : 'tasks', 
  loadChildren: './taskviewer/taskviewer.module#TaskviewerModule'
}

测试是否能正常加载组件。

6. 检查Angular CLI版本兼容性 #

Angular CLI 6.0.2是比较旧的版本，可能存在一些懒加载相关的bug。你可以尝试升级到6.x系列的最新版本（比如6.1.10），然后重新构建项目，看看问题是否解决。升级命令：

npm install @angular/cli@6.1.10 --save-dev

关于网络加载的ngfactory.js #

在AOT模式下，Angular 6的懒加载模块确实会生成带有ngfactory.js后缀的文件，这是正常的AOT编译产物，并不是问题所在，不用纠结这个，重点还是路由匹配和组件加载的逻辑。

内容的提问来源于stack exchange，提问作者Luca Brasi