Angular命名outlet懒加载子路由跳转重定向404问题求助

问题根因 #

• 核心错误来自父路由的pathMatch: 'full'配置：当路由存在子路由时，父路由不能设置全匹配规则。pathMatch: 'full'要求访问URL完全等于父路由的路径配置才会命中该路由，你跳转后的URL携带了命名出口的子路由后缀，无法命中父路由的全匹配规则，直接跳过该路由配置最终命中404路由。
• 你当前的编程式跳转逻辑、命名路由出口配置、子模块路由配置均无错误，懒加载的字符串写法在低版本Angular中也可正常运行，不是触发404的原因。

修复方案 #

1. 修改父模块路由配置 #

删除parent.module.ts中父路由的pathMatch: 'full'配置即可，修改后代码如下：

const routes = [
  { 
    path: ':id', 
    component: SocialWallComponent, 
    // 移除pathMatch: 'full'配置
    children: [
      { 
        path: ':upload-id', 
        loadChildren: '../shared/question/upload-question/upload-question.module#UploadQuestionModule', 
        outlet: "upload" 
      },
    ]
  }
]

@NgModule({
  imports: [ CommonModule, RouterModule.forChild(routes)],
  declarations: [SocialWallComponent],
  providers:[SocialWallService]
})

2. 可选适配高版本Angular #

如果你使用的是Angular 8及以上版本，建议将废弃的字符串形式懒加载写法替换为官方推荐的动态导入写法，避免后续版本升级失效：

{ 
  path: ':upload-id', 
  loadChildren: () => import('../shared/question/upload-question/upload-question.module').then(m => m.UploadQuestionModule), 
  outlet: "upload" 
}

修改完成后重启项目即可正常跳转到目标路由，加载懒加载的子组件。

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