Angular 13升级至14时LoadChildrenCallback类型不匹配问题求助

你的路由懒加载配置代码如下：

loadChildren: () =>
      import(/* webpackChunkName: "apc" */ 'advanced-payments-control')
        .then((m) => m.AdvancedPaymentsControlModule)
        .catch((e) => {
          console.error(`failed to load 'advanced-payments-control' module`);
          if (!debug) {
            setTimeout(() => window.location.reload(), 1000);
          } else {
            console.error(e);
          }
        }),

运行时触发的类型错误：

Type '() => Promise<void | typeof AdvancedPaymentsControlModule>' is not assignable to type 'LoadChildrenCallback'.
  Type 'Promise<void | typeof AdvancedPaymentsControlModule>' is not assignable to type 'Type<any> | Routes | NgModuleFactory<any> | Observable<Type<any> | Routes> | Promise<Type<any> | Routes | NgModuleFactory<...>>'.
    Type 'Promise<void | typeof AdvancedPaymentsControlModule>' is not assignable to type 'Promise<Type<any> | Routes | NgModuleFactory<any>>'.
      Type 'void | typeof AdvancedPaymentsControlModule' is not assignable to type 'Type<any> | Routes | NgModuleFactory<any>'.
        Type 'void' is not assignable to type 'Type<any> | Routes | NgModuleFactory<any>'.

问题成因 #

• Angular 14对LoadChildrenCallback的类型校验大幅收紧，要求懒加载返回的Promise必须最终解析为模块类型、路由配置数组或者NgModule工厂对象三者之一，不允许出现void类型的返回值。
• 你的代码中，catch分支没有返回符合要求的有效值：catch块内的代码执行完毕后默认返回undefined（对应TypeScript中的void类型），导致整个Promise的返回类型变成了Promise<void | AdvancedPaymentsControlModule>，完全不符合Angular 14的类型约束，因此触发了这个类型错误。
• 而Angular 13对该场景的类型校验较为宽松，没有强制要求返回值的类型，所以升级前不会出现这个错误。

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