Angular刷新浏览器后旧对象未释放，致应用快速崩溃求排查

核心原因分析 #

• 全局单例服务的持久持有：你把Structure实例存在了全局单例的appService中，浏览器刷新时Angular会重新初始化应用，但旧的服务实例并不会被立即回收——浏览器垃圾回收（GC）是按需异步执行的，只有当内存占用达到阈值时才会触发。如果appService还被window对象、第三方库等全局实体引用，旧实例会一直被持有无法释放。
• DevTools快照的视觉误导：停止npm start后你看到的旧Structure对象，可能只是DevTools之前录制的快照记录，而非当前页面的实际内存占用。刷新页面后，旧页面的内存理论上会被浏览器回收，但DevTools不会自动清空历史快照，需要手动刷新或重新录制。
• Structure类的隐性引用泄漏：检查Structure类内部是否存在静态属性、未清理的事件监听器（比如绑定了window或DOM元素的事件），或者创建实例时形成了闭包，意外引用了外部无法释放的对象。这些隐性引用会让实例脱离Angular的生命周期管理，无法被GC回收。
• 第三方库的间接泄漏：如果你的restS HTTP服务或其他依赖库存在内存泄漏，可能会间接持有Structure实例。比如请求完成后库内部仍保留了对响应对象的引用，导致实例无法被回收。

实操排查步骤 #

1. 手动触发GC验证：在Chrome DevTools的Memory面板，点击左上角的垃圾桶图标「Collect garbage」强制触发垃圾回收，然后录制新的快照，查看旧Structure对象是否消失。
2. 追踪引用链：在Memory面板中找到旧的Structure实例，右键选择「Retainers」查看引用链，定位到到底是哪个对象在持有它——可能是全局变量、未移除的事件监听器，或是单例服务的缓存属性。
3. 调整服务作用域测试：如果appService是根模块提供的全局单例，临时改成组件级提供（在组件的providers数组中声明），刷新页面后观察旧实例是否能被正常回收，以此确认是否是单例服务导致的问题。
4. 排查Structure实例的生命周期：如果Structure是Angular组件类，在ngOnDestroy钩子中添加日志，确认组件销毁时实例是否被触发销毁；如果是普通类，手动添加销毁方法，在组件的ngOnDestroy中调用，清理内部的事件监听器和引用。

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