Angular不同路由用不同布局时出现NG04002路由匹配错误

错误根源 #

你给DefaultLayoutComponent的所有子路由都指定了outlet: 'default'，但Angular默认会把不带出口标识的URL（比如/login）匹配到无名路由出口（即<router-outlet>不带name属性），而你的这些子路由都绑定到了命名为default的出口，导致路由完全匹配失败，触发NG04002错误。

修复方案（推荐） #

常规页面路由不需要使用命名出口，直接用默认出口即可，修改如下：

1. 调整路由配置：移除默认布局子路由的outlet属性

const routes: Routes = [
  {
    path: '',
    component: DefaultLayoutComponent,
    children: [
      { path: '', component: LandingPageComponent },
      { path: 'login', component: LoginRegisterComponent },
      { path: 'register', component: LoginRegisterComponent },
    ]
  },
  {
    path: 'companies',
    component: CmsLayoutComponent,
    children: [
      { path: '', component: CompanyIndexComponent, outlet: 'cms' },
      { path: ':id', component: CompanyViewComponent, outlet: 'cms' },
    ]
  },
];

2. 修改DefaultLayout模板：把命名出口改成默认出口

<router-outlet></router-outlet>

这样访问/login、/register就能正常匹配到对应的组件，不会再出现路由匹配失败的问题。

备选方案（保留命名出口） #

如果一定要保留default命名出口，那访问时必须使用Angular命名路由的URL格式，比如：

/login(default:login)

但这种方式仅适合页面内的辅助路由（如侧边栏、弹窗），不适合作为主页面路由的访问方式，因此不推荐。

内容的提问来源于stack exchange，提问作者A. Vreeswijk