Angular 15路由模块重定向异常：双//错误排查求助

问题根源 #

1. 路径格式违规：PagesRoutingModule里path: '/'的写法错误，Angular路由路径不能以斜杠开头——框架会自动处理根路径拼接，手动加斜杠会生成//dashboard这类双斜杠路径。
2. 重复加载模块：AppRoutingModule已经通过path: 'pages'加载了PagesModule，但PagesRoutingModule内部又重复配置loadChildren加载自身模块，这会导致路由解析混乱，移除斜杠后出现循环跳转正是这个原因。

修正后的路由配置 #

PagesRoutingModule

const routes: Routes = [
  {
    path: "",
    redirectTo: "dashboard",
    pathMatch: "full",
  },
  // 移除重复的loadChildren配置，PagesModule已由AppRoutingModule负责加载
  // 在这里配置/pages下的所有子路由，比如dashboard页面
  {
    path: "dashboard",
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  },
  // 其他/pages下的子路由都在此处添加
];

AppRoutingModule

保持现有配置即可，这里已经正确处理了根路径重定向与PagesModule的加载：

const routes: Routes = [
  {
    path: '',
    redirectTo: "pages",
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./login-page/login-page.module').then(module => module.LoginPageModule)
  },
  {
    path: 'pages',
    canLoad: [AuthGuard],
    loadChildren: () => import('./pages/pages.module').then(module => module.PagesModule),
  },
];

原理说明 #

Angular嵌套路由中，父路由（AppRoutingModule的pages）负责加载子模块，子模块路由（PagesRoutingModule）的路径会自动基于父路由路径拼接，因此子路由无需加斜杠，也不能重复加载自身模块。pathMatch: 'full'确保只有路径完全匹配时才触发重定向，避免部分匹配引发的异常跳转。

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