Angular路由异常重定向至localhost问题排查与修复

在Angular项目中，访问特定路由时会出现异常重定向到localhost:4202的问题，触发该问题的示例URL包括：

• localhost:4202/pages/users/STSP0001PNIENOUIJX/dashboards/level/0
• localhost:4202/pages/users/STSP0001PNIENOUIJX/dashboards/level/1
• localhost:4202/pages/users/STSP0001PNIENOUIJX/dashboards/

相关路由配置 #

app-routing.module.ts #

const routes: Routes = [
  {
    path: 'pages/users',
    loadChildren: () => import('./@modules/users-dashboard/users-dashboard.module').then(mod => mod.UsersDashboardModule),
  },
  ...
]

UsersDashboardRoutingModule #

const routes: Routes = [
  {
    path: ':userId/dashboards',
    loadChildren: () => import('../monitoring-levels/monitoring-levels.module').then( (module) => module.MonitoringLevelsModule)
  },
  { path: '', component: PageNotFoundComponent },
  { path: '**', component: PageNotFoundComponent }
];

MonitoringLevelsRoutingModule（原问题配置） #

const routes: Routes = [
  { path: 'level/:levelId', component: MonitoringDashboardComponent },
  { path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}`},
  { path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];

MonitoringDashboardComponent模板 #

<ng-container [ngSwitch]="monitoringLevelID">
  <level0-monitoring-dashboard *ngSwitchDefault></level0-monitoring-dashboard>
  <level1-monitoring-dashboard *ngSwitchCase="1"></level1-monitoring-dashboard>
  <level2-monitoring-dashboard *ngSwitchCase="2"></level2-monitoring-dashboard>
</ng-container>

问题原因与解决方案 #

问题根源在于MonitoringLevelsRoutingModule中配置的空路径(path: '')路由缺少pathMatch: 'full'属性，Angular路由匹配时会将该路由视为前缀匹配，导致即使有更具体的路由（如level/:levelId）被访问，也会触发空路径的重定向规则。

有两种可行的修复方式：

方式一：移除空路径路由配置 #

删除MonitoringLevelsRoutingModule中path: ''的路由项，修改后配置如下：

const routes: Routes = [
  { path: 'level/:levelId', component: MonitoringDashboardComponent },
 
  { path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];

方式二：为空白路径路由添加pathMatch: 'full'属性 #

保留空路径路由，但指定pathMatch: 'full'，确保只有当当前路由路径完全为空时才触发重定向，修改后配置如下：

const routes: Routes = [
  { path: 'level/:levelId', component: MonitoringDashboardComponent },
  { path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}`, pathMatch: 'full'},
  { path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];

内容的提问来源于stack exchange，提问作者Niccolò Boddi