Angular8 懒加载路由路径重复、热重载空白页问题咨询

第一重诱因：重定向配置使用了相对路径 #

你当前的路由配置里，空根路径的重定向写的是redirectTo: "first-page"，这是相对路径写法，而非根级绝对路径redirectTo: "/first-page"。

• 第一次访问localhost:4200时，因为加了pathMatch: "full"，只有完全匹配空根路径才会触发重定向，此时相对路径会正确解析为根下的/first-page，所以首次加载没问题。
• 但相对路径的规则是：在当前路由所在的路径层级下拼接。如果不是在根路径触发的重定向，就会直接在现有路径后面追加目标路径段。
  另外你通配符路由的redirectTo: ''也是相对路径写法，同样会受路由上下文影响。

第二重诱因：Angular 8 热重载的路由初始化缺陷 #

Angular 8默认的热重载流程存在已知bug：

• 热重载触发时，会先销毁旧应用实例、重新初始化路由配置，这个过程中懒加载的子模块不会立刻加载完成，临时生成的路由树是不完整的。
• 此时系统会拿地址栏当前的路径（比如正常的/first-page）去匹配不完整的临时路由，因为懒加载子模块的路由规则暂时没注册，路由器会误命中根级path: ''的重定向规则。此时重定向的上下文已经是在/first-page下，相对路径的first-page就会拼到现有路径后面，直接变成/first-page/first-page。
• 第二次热重载时，已经重复叠加的路径没法匹配到已注册的组件路由，路由树的状态完全异常，就会出现空白页。

额外排查点 #

如果改完路径后问题还存在，要检查懒加载子模块的路由配置：

• 确认FirstPageModule、SecondPageModule的子路由里，没有重复写和父级路由同名的first-page/second-page路径，子路由对应组件的path应该写为''，匹配父级传入的路径前缀即可。

• 把所有重定向配置改成根级绝对路径：
  • 空根路径重定向：{ path: '', redirectTo: '/first-page', pathMatch: 'full' }
  • 通配符路由重定向：{ path: '**', redirectTo: '/first-page' }
    彻底避免重定向路径随当前路由上下文拼接。
• 把Angular CLI和核心依赖升级到8.x系列的最后一个补丁版本，该系列的后续补丁已经修复了部分热重载下路由初始化的bug。
• 如果自定义了HMR配置，要确保热重载流程里重置路由状态到根级，不要触发无效的重定向逻辑。

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