Angular10路由切换时追加新组件未移除旧组件异常排查

核心异常表现 #

点击触发路由跳转的按钮后，目标路由对应组件直接追加到页面DOM中，本应被新组件替换的旧路由组件始终留存，未被销毁移除。

异常特征 #

• 偶发：刷新页面后故障随机出现，无稳定复现路径
• 浏览器适配差异：仅在Chrome、Edge等Chromium内核浏览器中出现，Firefox浏览器无该问题
• 无报错：故障触发时浏览器控制台无任何错误、警告信息
• 交互后自动恢复：调整窗口大小触发resize事件、打开开发者工具、在页面任意位置点击（无需点击可交互元素），页面都会立刻退出异常状态，正确完成路由组件的替换渲染
• 现象参考：

核心诱发原因 #

这类问题本质是路由切换过程中Angular变更检测未被正常触发，结合Chromium内核的DOM更新批处理机制导致：新组件的DOM插入操作被浏览器渲染线程优先提交，旧组件的销毁移除操作因为没有触发变更检测，被积压在待执行队列中，直到任意用户交互被Zone.js捕获、拉起新一轮变更检测后，积压的DOM操作才会全部执行完成，页面恢复正常。
Firefox因为DOM更新队列的调度逻辑和Chromium不同，不会出现操作拆分提交的情况，因此不会触发该异常。

排查方向 #

• 检查Zone.js配置与版本匹配：确认polyfills.ts中Zone.js的引入顺序正确，未遗漏RxJS补丁、事件补丁等必要依赖；Angular 10需匹配0.10.x版本的Zone.js，版本不匹配会导致部分异步任务、事件监听无法被Zone正确代理，偶发变更检测丢失。
• 检查路由跳转上下文：排查触发跳转的点击事件回调中，是否存在脱离NgZone执行的逻辑——比如跳转逻辑被包裹在ngZone.runOutsideAngular()回调中，或者跳转前调用了未被Zone.js patch的第三方SDK异步方法、自定义原生事件回调，导致整个路由切换流程没有触发变更检测。
• 检查路由出口相关逻辑：确认是否对router-outlet做了二次封装，是否存在通过*ngIf、动态组件指令控制路由出口显隐的逻辑；排查路由activate、deactivate事件回调中，是否有手动调用变更检测器detach()方法分离视图后未重新连接的逻辑。
• 检查渲染相关CSS与动画：排查路由容器是否配置了content-visibility: auto、will-change等在旧版Chromium中存在渲染队列bug的CSS属性；如果用了自定义CSS路由切换动画，确认动画结束后没有阻塞DOM更新的逻辑。

快速验证方法 #

可以先在根组件的路由导航结束回调中手动触发一次全量变更检测，如果故障不再复现，即可确认根因为变更检测漏触发：

import { NavigationEnd, Router } from '@angular/router';
import { ChangeDetectorRef } from '@angular/core';
import { filter } from 'rxjs/operators';

// 根组件构造函数中注入依赖并添加逻辑
constructor(
  private router: Router,
  private cdr: ChangeDetectorRef
) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    this.cdr.detectChanges();
  });
}

验证通过后再顺着上述排查点定位具体漏触发变更检测的代码位置即可，不建议长期保留强制变更检测的逻辑作为最终修复方案。

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