Angular页面刷新或直接输入URL无法匹配dashboard路由该如何解决？

问题诱因 #

• 核心原因是子懒加载模块的路由注册方式错误：Shell模块和Dashboard模块作为子模块，错误使用了RouterModule.forRoot()注册路由。只有根模块AppModule允许调用RouterModule.forRoot()来注册全局路由实例和根路由配置，所有子模块（包括懒加载模块）必须使用RouterModule.forChild()注册自身路由，才能将路由规则合并到全局路由树中。
• 点击routerLink跳转正常是因为运行时模块已经加载完成，临时的路由状态可以匹配跳转路径；但刷新/直接输入地址时，Angular会从零开始构建全局路由树，未正确注册的子路由规则不会被识别，因此无法匹配到对应组件。

修复方案 #

1. 修正Shell模块的路由注册配置
   Shell模块的imports中，将路由注册代码改为：

imports: [RouterModule.forChild(routes)]

2. 修正Dashboard模块的路由注册配置
   Dashboard模块的imports中，同样使用forChild注册路由：

imports: [RouterModule.forChild(routes)]

3. 生产环境部署额外配置
   如果部署到正式服务器后刷新仍出现404，需要配置Web服务器将所有请求重定向到index.html，交由Angular路由处理路径匹配，以Nginx为例配置如下：

location / {
  try_files $uri $uri/ /index.html;
}

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