Angular15路由异常：直接访问URL时ActivatedRouteSnapshot丢失属性值

针对你遇到的Angular 15路由异常问题，以下是具体排查方向和解决步骤：

• 检查路由配置顺序
  Angular路由按配置顺序匹配，确保具体路由（如/dashboard/:code）放在通配符路由（**）之前，否则通配符会优先匹配导致具体路由失效。示例正确配置：

  const routes: Routes = [
    { path: 'dashboard/:code', component: DashboardComponent },
    // 其他具体路由需放在通配符前
    { path: '**', redirectTo: '', pathMatch: 'full' }
  ];
  

• 确认Hash模式配置
  由于你的URL包含#，需确保RouterModule.forRoot中明确启用Hash策略，同时避免重复导入RouterModule导致配置冲突：

  RouterModule.forRoot(routes, {
    useHash: true,
    enableTracing: true
  })
  

• 排查主组件初始化阻塞
  主组件ngOnInit先执行，若其中存在长时间同步任务或未正确处理的异步操作（如HTTP请求、未完成的订阅），可能阻塞路由激活。可临时注释ngOnInit内的代码，测试是否能正常加载组件，以此排查是否是主组件逻辑导致的问题。

• 检查路由守卫/Resolver逻辑
  若路由配置了守卫（CanActivate/CanLoad等）或Resolver，直接访问URL时可能因守卫返回false、Resolver未正确返回数据（卡在Pending状态）导致路由激活失败。需验证守卫的权限逻辑在直接访问时是否通过，Resolver是否能正常完成数据解析。

• 修正ActivatedRoute参数获取方式
  组件中依赖ActivatedRoute获取参数时，避免直接使用快照（初始加载时快照可能未正确初始化），改用订阅paramMap的方式：

  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      const code = params.get('code');
      // 处理参数逻辑
    });
  }
  

• 清除缓存并重启服务
  浏览器缓存或Angular热重载缓存可能引发路由异常，尝试清除浏览器缓存，停止并重启ng serve服务。

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