Angular辅助router-outlet路由路径匹配失败问题求助

问题原因 #

你为about路由指定了outlet: "outlet1"辅助路由出口，但跳转链接未明确指定目标出口，Angular默认尝试在主路由出口匹配该路由，导致无法找到匹配项，抛出NG04002: Cannot match any routes. URL Segment: 'about'错误。

解决步骤 #

1. 修正跳转链接的routerLink写法 #

必须在routerLink中明确指定辅助路由出口，有两种常用写法：

写法一：直接指定辅助路由（主路由内容清空）

将About按钮的链接修改为：

<div class="col-2">
  <a [routerLink]="[{ outlets: { outlet1: 'about' } }]">
    <button type="button" class="btn btn-primary">About</button>
  </a>
</div>

写法二：保留当前主路由，同时加载辅助路由

如果希望切换辅助路由时主路由内容保持不变，使用相对路径写法：

<div class="col-2">
  <a [routerLink]="['.', { outlets: { outlet1: 'about' } }]">
    <button type="button" class="btn btn-primary">About</button>
  </a>
</div>

其中.表示当前激活的主路由路径，比如当前在home页面，点击后URL会变为/home(outlet1:about)。

2. 验证路由守卫（可选） #

如果修改后仍有问题，可临时注释about路由的canActivate: [AuthGuard]配置，排除守卫拦截导致的路由无法加载问题。

路由配置说明 #

你的app-routing.module.ts中辅助路由的配置是正确的，无需修改：

{
  path: 'about', 
  canActivate: [AuthGuard],
  component: AboutComponent, 
  outlet: "outlet1",
}

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