Angular 9项目本地ng serve后无限加载问题求助

Hey there, let's break down what's happening here and fix this frustrating issue!

核心问题定位：路由守卫触发的无限循环 #

从你给出的调用栈里，我抓住了关键线索：

navigate (router.js:7623)
canActivate (auth-external.guard.ts:16)

你的auth-external.guard.ts第16行在canActivate方法里调用了router.navigate，但没有正确终止守卫逻辑，这直接引发了路由无限循环！

当守卫内部触发导航时，Angular会重新触发路由守卫的校验流程，如果守卫没有返回明确的终止信号（比如false或已完成的Observable），这个过程会持续重复：

• 每次循环都会让Zone的任务计数不断累加，也就是你调试时频繁停在_updateTaskCount函数的原因
• 主线程被这个无限循环完全阻塞，导致浏览器白屏、sockjs请求一直处于pending状态（LiveReload连接根本没机会完成握手）
• 只有app.component.ts的构造函数和ngOnInit能触发断点，因为这部分逻辑是在路由守卫进入循环前执行的

快速修复步骤 #

1. 修正auth-external.guard.ts的canActivate方法
   找到第16行的导航代码，确保导航后返回明确的终止值：

// 错误写法（会触发循环）
canActivate() {
  this.router.navigate(['/your-target-path']);
  // 无返回值或返回未完成的Observable
}

// 正确写法
import { of } from 'rxjs';

canActivate(): Observable<boolean> | boolean {
  this.router.navigate(['/your-target-path']);
  // 返回false直接终止路由流程
  return false;
  // 异步场景下可返回已完成的Observable
  // return of(false);
}

2. 验证修复效果

• 保存修改后重新执行ng serve
• 若页面能正常加载，说明路由循环问题已解决，sockjs的pending状态也会自动消失

额外排查方向（若上述修复无效） #

如果问题仍存在，可以尝试这些排查点：

• 核对Node.js版本：Angular 9官方推荐Node.js 12.x版本，和其他正常运行的电脑对比版本，版本不兼容可能引发奇怪的运行时问题
• 清理浏览器缓存：用隐身模式打开页面，或手动清除浏览器缓存及Service Worker缓存（若项目使用了Service Worker）
• 重置本地开发环境：除删除node_modules外，可清理package-lock.json/yarn.lock后重新执行npm install；同时清除Angular缓存：ng cache clean

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