Angular配置双router-outlet出现路由匹配报错问题

• 加载sign-in登录组件时，页面隐藏侧边栏与顶部栏，仅展示登录内容
• 登录后进入dashboard等业务页面时，正常展示侧边栏、顶部栏、业务内容的标准布局

现有代码结构如下：

1. app.component.html（简化版）

<div>
   <div id="side-bar">sidebar goes here</div>
   <div id="top-bar">top bar goes here</div>
   <div id="content">
      <router-outlet></router-outlet>
   </div>
</div>
<router-outlet name="sign-in-outlet"></router-outlet>

2. app-routing.module.ts（简化版）

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'auth' },
  {
    path: 'auth',
    loadChildren: () => import('@my-project/auth').then(m => m.AuthModule)
  },
  {
    path: 'dashboard',
    loadChildren: () =>
      import('@my-project/dashboard').then(
        m => m.DashboardModule
      )
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

3. auth.module.ts（简化版）

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: 'sign-in', component: SignInComponent, outlet: 'sign-in-outlet' }
    ])
  ],
  declarations: [
    SignInComponent
  ]
})
export class AuthModule {}

访问localhost:4200/auth/sign-in时触发报错：

Error: Cannot match any routes. URL Segment: 'auth/sign-in'

• 命名路由出口（named outlet）的匹配规则要求：访问带命名出口的路由时，必须同时命中主出口和对应命名出口的路径配置。你当前把sign-in路由配置在auth懒加载模块的子路由下，仅指定了命名出口，主出口下没有匹配auth/sign-in的路由，因此直接报路由匹配失败。
• 这类布局隐藏场景不需要强行使用命名出口，额外增加配置复杂度。

方案一：路由状态控制布局（推荐，配置成本最低） #

不需要保留单独的sign-in-outlet，通过监听路由状态控制侧边栏、顶部栏的显隐即可，符合Angular常规布局实现逻辑。

1. 调整app.component.html，给侧边栏、顶部栏加显隐判断：

<div>
   <div id="side-bar" *ngIf="!isLoginPage">sidebar goes here</div>
   <div id="top-bar" *ngIf="!isLoginPage">top bar goes here</div>
   <div id="content" [class.fullscreen]="isLoginPage">
      <router-outlet></router-outlet>
   </div>
</div>

2. 在app.component.ts中添加路由监听，标记当前页面是否为登录页：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  isLoginPage = false;

  constructor(private router: Router) {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        // 路由包含/auth/sign-in时判定为登录页，隐藏公共布局组件
        this.isLoginPage = event.urlAfterRedirects.includes('/auth/sign-in');
      });
  }
}

3. 修正路由配置的重定向逻辑：
   • 调整app-routing.module.ts的根路径重定向规则，原配置重定向到auth但auth模块下无空路径路由，会触发匹配失败：

   const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'auth/sign-in' },
     {
       path: 'auth',
       loadChildren: () => import('@my-project/auth').then(m => m.AuthModule)
     },
     {
       path: 'dashboard',
       loadChildren: () => import('@my-project/dashboard').then(m => m.DashboardModule)
     }
   ];
   

   • 调整auth.module.ts的子路由，移除不必要的outlet配置，补全模块内空路径重定向：

   @NgModule({
     imports: [
       RouterModule.forChild([
         { path: '', pathMatch: 'full', redirectTo: 'sign-in' },
         { path: 'sign-in', component: SignInComponent }
       ])
     ],
     declarations: [SignInComponent]
   })
   export class AuthModule {}
   

方案二：保留命名出口的配置方式 #

如果一定要使用双router-outlet实现，需要将命名路由的配置调整到符合Angular的匹配规则，注意该方案配置和使用都更繁琐：

1. 将命名路由提升到根路由配置层级，不要放在懒加载子模块中：

   // app-routing.module.ts
   const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: '/(sign-in-outlet:auth/sign-in)' },
     {
       path: 'auth/sign-in',
       component: SignInComponent,
       outlet: 'sign-in-outlet'
     },
     {
       path: 'dashboard',
       loadChildren: () => import('@my-project/dashboard').then(m => m.DashboardModule)
     }
   ];
   

2. 访问登录页时需要遵循命名出口的路由格式，直接输入url的路径为/(sign-in-outlet:auth/sign-in)，代码中跳转的写法为：

   this.router.navigate(['', { outlets: { 'sign-in-outlet': ['auth', 'sign-in'] } }]);
   

3. 该方案下主出口没有匹配普通格式auth/sign-in路径的路由，因此直接访问localhost:4200/auth/sign-in依然会报匹配错误，必须使用命名路由专属的路径格式。

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