Angular 14二次路由导航触发RangeError:调用栈溢出求助

使用Angular 14.2.9版本开发时遇到以下问题：第二次点击同一routerLink进行路由导航时，触发RangeError: Maximum call stack size exceeded错误，但首次点击该路由链接无异常；直接在浏览器地址栏输入URL回车可正常访问。已排查所有模块，确认不存在循环依赖（否则首次访问就会报错）。恳请协助解决。

错误栈信息 #

ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at router.mjs:2188:27
    at Array.forEach (<anonymous>)
    at setRouterState (router.mjs:2188:19)
    at router.mjs:2188:32
    at Array.forEach (<anonymous>)
    at setRouterState (router.mjs:2188:19)
    at router.mjs:2188:32
    at Array.forEach (<anonymous>)
    at setRouterState (router.mjs:2188:19)
    at router.mjs:2188:32
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26194:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:21)
    at invokeTask (zone.js:1661:18)
handleError @ core.mjs:7621
next @ core.mjs:26900
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.mjs:22729
(anonymous) @ core.mjs:26233
invoke @ zone.js:372
run @ zone.js:134
runOutsideAngular @ core.mjs:26106
onHandleError @ core.mjs:26233
handleError @ zone.js:376
runGuarded @ zone.js:147
api.microtaskDrainDone @ zone.js:1072
drainMicroTaskQueue @ zone.js:592
invokeTask @ zone.js:491
invokeTask @ zone.js:1661
globalCallback @ zone.js:1692
globalZoneAwareCallback @ zone.js:1725
Show 21 more frames

相关代码 #

主模块路由配置 #

export const mainRoutes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '',
    component: MainComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'home',
        loadChildren: () => import('../home/home.module').then(m => m.HomeModule)
      },
      {
        path: 'viewers',
        loadChildren: () => import('../viewers/viewers.module').then(m => m.ViewersModule)
      },
      {
        path: 'viewers/:name',
        loadChildren: () => import('../viewers/viewers.module').then(m => m.ViewersModule)
      },
      {
        path: 'dashboards',
        loadChildren: () => import('../dashboards/dashboards.module').then(m => m.DashboardsModule)
      },
      {
        path: 'ccs-emulators',
        loadChildren: () => import('../ccs-emulator-container/ccs-emulator-container.module').then(m => m.CcsEmulatorContainerModule)
      },
      {
        path: 'ccs-emulators/:name',
        loadChildren: () => import('../ccs-emulator-container/ccs-emulator-container.module').then(m => m.CcsEmulatorContainerModule)
      },
      {
        path: 'configurations',
        loadChildren: () => import('../configurations/configurations.module').then(m => m.ConfigurationsModule)
      }
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(mainRoutes)
  ],
  exports: [RouterModule]
})
export class MainRoutingModule { }

Dashboard路由配置 #

export const dashboardsRoutes: Routes = [
  {
    path: '',
    component: DashboardsComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'sessions',
        loadChildren: () => import('../sessions-dashboard/sessions-dashboard.module').then(m => m.SessionsDashboardModule)
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(dashboardsRoutes)],
  exports: [RouterModule]
})
export class DashboardsRoutingModule { }

AuthGuard代码 #

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router
  ) { }

  canActivate(): boolean {
    if (!this.isAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }

    return true;
  }

  private isAuthenticated(): boolean {
    return this.authService.isLoginRequired()
      ? this.authService.isLoggedIn()
      : true;
  }
}

控制台错误截图 #

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