Angular12升级至13后出现MaxListenersExceededWarning报错求助
Angular 13升级后触发MaxListenersExceededWarning告警解决方案
这个问题是Angular13生态搭配Node16版本开发时的高频已知问题,和ngrx本身无直接关联,按以下优先级排查修复即可:
- 优先修复开发服务依赖的已知泄漏问题
Angular 13初始版本内置的webpack-dev-server集成存在HTTP请求监听器未正常注销的bug,在页面刷新、发起接口请求时会持续新增监听器,累积超过Node默认10个的阈值就会抛出告警。将开发依赖升级到13分支的最新补丁版本即可修复:
升级完成后删除npm install @angular/cli@13 @angular-devkit/build-angular@13 --save-devnode_modules目录、包锁文件(package-lock.json/yarn.lock/pnpm-lock.yaml),重新执行依赖安装后重启开发服务,绝大多数场景下告警会直接消失。 - 开发环境临时调整Node监听器阈值
如果升级依赖后仍有告警,是因为Node 16相比Node 14收紧了事件监听器的阈值校验规则,可在开发启动脚本中调高监听器上限,该配置仅作用于本地开发环境,不会影响生产构建:
类Unix(macOS/Linux)环境下修改package.json中的启动脚本:
Windows环境需先安装"scripts": { "start": "NODE_OPTIONS='--max-old-space-size=4096 --events-max-listeners=100' ng serve" }cross-env做跨平台环境变量注入:
再调整启动脚本为:npm install cross-env --save-dev"scripts": { "start": "cross-env NODE_OPTIONS='--max-old-space-size=4096 --events-max-listeners=100' ng serve" } - 排查ngrx Effect的不规范写法
ngrx v13调整了Effect的生命周期绑定逻辑,旧版本中会被框架隐式注销的订阅,在v13版本中需要手动控制终止逻辑。检查所有全局Effect、接口请求相关的Effect:- 不需要派发action的Effect必须显式声明
{ dispatch: false } - 持续触发的数据流、轮询请求必须在管道末尾加
takeUntil(this.destroy$)类的销毁逻辑,避免订阅持续累积生成冗余的事件监听器
- 不需要派发action的Effect必须显式声明
提示:如果该告警仅在
ng serve本地开发时出现,不会对ng build --prod产出的生产环境包造成任何影响,生产环境代码运行在浏览器端,不依赖Node的事件监听逻辑。
内容的提问来源于stack exchange,提问作者nshathish
相关产品推荐
相关产品推荐

