Angular命名router-outlet不显示组件 报路由匹配错误

• 路由配置层级错误：当前所有admin/xxx的功能路由和admin路由为平级顶级路由，没有配置为AdminComponent的子路由，也未指定这些路由需要渲染到命名插座adminoutlet。Angular默认只会将顶级路由匹配到根级无名称的默认路由插座，无法识别这些组件需要渲染到Admin组件内部的命名插座中。
• 路由跳转写法错误：当前routerLink使用的相对路径未绑定正确的路由上下文，Angular解析跳转路径时会直接把projecttype、team这类路径片段作为根路径下的路由做匹配，找不到对应规则就会抛出Cannot match any routes的错误；即便路径调整后匹配到了平级路由，也会直接在根插座加载完整页面，不会出现在侧边栏相邻的内容区。

1. 调整路由配置结构，将所有需要在侧边栏内容区渲染的功能路由移动到admin路由的children数组中，同时为每个子路由指定outlet为adminoutlet，删除原来平级编写的admin/xxx路由，示例配置如下：

const routes: Routes = [
  { 
    path: "admin", 
    component: AdminComponent, 
    canActivate: [AuthGuard, PermissionGuard], 
    data: { pageid: "f4e8c4ed-9871-40ab-98c1-75e9608d822a" },
    children: [
      // 如需默认进入admin页就加载某个功能页，可添加如下重定向规则
      {
        path: "",
        redirectTo: "/admin/(adminoutlet:projecttype)",
        pathMatch: "full"
      },
      {
        path: "projecttype",
        component: ProjectTypeComponent,
        canActivate: [AuthGuard],
        outlet: "adminoutlet"
      },
      {
        path: "area",
        component: AreaComponent,
        canActivate: [AuthGuard],
        outlet: "adminoutlet"
      },
      {
        path: "team",
        component: TeamComponent,
        canActivate: [AuthGuard],
        outlet: "adminoutlet"
      },
      // 其余iteration、member、workitemtype等所有admin下的功能路由，均按上述格式配置，统一添加outlet字段即可
    ]
  }
];

2. 修正侧边栏的routerLink跳转写法，明确指定父路由路径，避免相对路径解析错误，示例代码如下：

<a 
  [routerLink]="['/admin', { outlets: { adminoutlet: ['projecttype'] } }]" 
  style="margin-bottom: 5px"
  class="list-group-item list-margin"
>
  <i class="glyphicon glyphicon-user"></i> project kind
</a>

其余侧边栏跳转链接按相同格式修改即可，比如跳转到team页面时，将['projecttype']替换为['team']。修改完成后跳转的URL会呈现/admin/(adminoutlet:xxx)的格式，属于Angular辅助（命名插座）路由的标准URL格式，为正常现象。

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