Migration from Angular version 13 to 14 LoadChildrenCallback issue

Question

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);
          }
        }),

I m upgrading from Angular version 13 to 14. In code getting error :

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>'.

Any idea what would cause the problem ? Thanks !

Answer 1

You are missing the return for catch when I did this the error went away.

You can also use throw e; at the end, which is more suited for catch blocks.

Without the return statement, the catch would output Promise which was causing typescript to trigger the type mismatch error.

loadChildren: () =>
  import('./features/home/home.module')
    .then((m) => m.HomeModule)
    .catch((e) => {
      console.error(`failed to load 'advanced-payments-control' module`);
      if (!debug) {
        setTimeout(() => window.location.reload(), 1000);
      } else {
        console.error(e);
      }
      return e; // <- changed here!
    }),