Angular路由报错NG04002：无法匹配空路径子路由的解决方法

你当前的路由结构中，pets和user是带modal命名插座的空路径路由的子路由，但当你导航到account/user或account/pets时，Angular会尝试匹配account的直接子路由，而非那个命名插座路由的子路由，自然找不到对应的规则，抛出NG04002错误。

可以通过两种方式解决：

方式一：调整路由结构，让account直接包含pets/user路由并关联命名插座 #

修改路由配置，将pets和user设为account的直接子路由，同时指定它们使用modal插座，并在内部嵌套对应组件的路由：

{
  path: 'account',
  canActivate: [AuthGuardService],
  children: [
    // 访问account根路径时，在modal插座加载AccountPageComponent
    {
      path: '',
      component: AccountPageComponent,
      outlet: 'modal',
      children: [
        // 可选：设置默认子路由，比如默认加载user组件
        { path: '', redirectTo: 'user', pathMatch: 'full' }
      ]
    },
    // 访问account/pets时，在modal插座加载AccountPageComponent，同时加载PetsComponent到它的无名插座
    {
      path: 'pets',
      outlet: 'modal',
      component: AccountPageComponent,
      children: [
        {
          path: '',
          component: PetsComponent,
          children: [
            { path: ':id', component: PetComponent }
          ]
        }
      ]
    },
    // 访问account/user时的对应配置
    {
      path: 'user',
      outlet: 'modal',
      component: AccountPageComponent,
      children: [
        { path: '', component: UserComponent }
      ]
    }
  ]
}

方式二：保留原有嵌套结构，添加重定向规则 #

如果不想改动核心嵌套结构，可以给account添加直接子路由，将account/pets和account/user重定向到带命名插座的正确路由格式：

{
  path: 'account',
  canActivate: [AuthGuardService],
  children: [
    {
      path: '',
      component: AccountPageComponent,
      outlet: 'modal',
      children: [
        {
          path: 'pets',
          component: PetsComponent,
          children: [
            { path: ':id', component: PetComponent }
          ]
        },
        { path: 'user', component: UserComponent },
        { path: '', redirectTo: 'user', pathMatch: 'full' }
      ]
    },
    // 添加重定向，将account/pets映射到带modal插座的路由
    { path: 'pets', redirectTo: '/account/(modal:pets)' },
    // 同理处理user路由
    { path: 'user', redirectTo: '/account/(modal:user)' }
  ]
}

这样用户访问account/user时，会自动重定向到Angular能识别的命名插座路由格式，同时保持URL友好。

内容的提问来源于stack exchange，提问作者Michał B