在AppModule中配置Angular ErrorHandler引发懒加载子模块路由报错

我之前也遇到过几乎一模一样的问题，大概率不是ng serve的bug，而是你自定义的ErrorHandler实现干扰了Angular的懒加载模块加载流程——这其实是个挺常见的坑，我来给你拆解下可能的原因和解决办法：

1. 先定位问题根源 #

先临时注释掉AppModule里对自定义ErrorHandler的配置，比如去掉providers里的{ provide: ErrorHandler, useClass: CustomErrorHandler }这一行，重启ng serve试试。如果懒加载路由恢复正常，那百分百是自定义错误处理器的问题。

2. 检查ErrorHandler的核心实现 #

Angular的懒加载模块是通过动态import()语法异步加载的，而ErrorHandler会捕获全局范围内的错误，包括模块加载过程中的异常。如果你的自定义实现犯了这几个错误，就会导致报错：

• 未调用父类的handleError方法：自定义ErrorHandler必须继承自Angular的ErrorHandler基类，并且在处理完自定义逻辑后调用super.handleError(error)。如果跳过这一步，Angular内部的错误处理流程会被中断，懒加载模块加载时的错误无法被正确处理，就会抛出“Cannot find module”的异常。
  正确的示例应该是这样：

  import { ErrorHandler, Injectable } from '@angular/core';
  
  @Injectable()
  export class CustomErrorHandler extends ErrorHandler {
    handleError(error: any): void {
      // 你的自定义逻辑：比如上报错误到监控平台、打印自定义日志
      console.error('自定义错误捕获：', error);
      // 必须调用父类方法，让Angular处理内部流程
      super.handleError(error);
    }
  }
  

• 吞掉了原始错误：如果在handleError里用try/catch包裹了逻辑，却没有重新抛出错误或者传递给父类，也会导致Angular无法感知模块加载失败的真实原因，最终表现为找不到模块。
• 出现循环依赖：检查下你的自定义ErrorHandler是不是不小心导入了某个懒加载模块里的组件、服务或类型？这种循环依赖会打乱Angular的模块加载顺序，导致懒加载模块无法被正确解析。

3. 快速验证懒加载路由配置 #

虽然你说之前路由正常，但还是可以核对下懒加载路由的语法是否正确：

{
  path: 'your-lazy-path',
  // 确认路径拼写正确，模块类名也匹配
  loadChildren: () => import('./path-to-your-lazy-module/lazy.module').then(m => m.LazyModule)
}

有时候修改ErrorHandler后触发了缓存更新，可能暴露了之前隐藏的路径拼写问题。

4. 排查全局环境干扰 #

如果你的ErrorHandler里有修改全局对象（比如window、Promise）的逻辑，比如重写了Promise.prototype.catch，这会直接影响动态import()的Promise链处理，导致模块加载异常。这种情况需要去掉这类全局修改，或者调整逻辑避免影响Angular的内部流程。

总的来说，这种问题几乎都是自定义ErrorHandler没有遵循Angular的错误处理规范导致的，和ng serve本身无关。按照上面的步骤排查，应该很快能解决。

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