Angular路由首次加载失效：组件需刷新才正常显示

1. 修复子路由重定向的pathMatch配置 #

你的AdminRoutingModule中，空路径重定向缺少pathMatch: 'full'参数，这会导致路由匹配逻辑异常，首次跳转时无法正确触发到dashboard的重定向。修改代码如下：

const routes: Routes = [
  { path: 'crm', component: CrmComponent},
  { path: 'dashboard', component: BoardComponent},
  { path: 'partners', component: PartnersComponent},
  { path: 'consultants', component: ConsultantsComponent},
  { path: 'sdr', component: SdrComponent},
  { path: 'edit-profile/:id', runGuardsAndResolvers: 'always', component: ConsultantUserEditProfilComponent },
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full' // 必须添加该配置
  }
];

2. 验证路由守卫的异步逻辑 #

检查AdminGuard和AuthGuard的实现，确保守卫在异步操作（比如验证用户权限的API请求）完成后再返回结果。如果守卫在异步操作未完成时就返回false，会导致路由模块无法正确加载；而刷新时因为缓存了权限状态，守卫直接返回true，组件就能正常显示。

示例正确的守卫实现：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.authService.checkAdminPermission().pipe(
    map(isAdmin => {
      if (isAdmin) {
        return true;
      }
      this.router.navigate(['/connexion']);
      return false;
    })
  );
}

3. 确保登录后状态同步更新 #

登录组件中，跳转前要确保用户认证状态已经完全更新。比如，登录请求完成后，先更新本地存储或状态管理中的用户信息，再执行路由跳转：

login() {
  this.authService.login(credentials).subscribe({
    next: (user) => {
      // 先同步用户状态
      this.authService.setCurrentUser(user);
      // 再执行路由跳转
      this.router.navigate(['/admin']);
    },
    error: (err) => {
      // 处理登录错误
    }
  });
}

4. 检查路由模块加载顺序 #

确认AdminModule的imports数组中，AdminRoutingModule的位置正确（需在组件相关模块之后、路由依赖模块之前）。当前配置看起来无问题，但可尝试在跳转时强制触发路由重新校验：

// 仅作为临时测试方案，不推荐长期使用
this.router.navigate(['/admin']).then(() => {
  this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  this.router.onSameUrlNavigation = 'reload';
});

内容的提问来源于stack exchange，提问作者Antoine a.k.a Zesso Renoux