angulartypescriptlazy-loadingangular-routingangular-lazyloading

Migration from Angular version 13 to 14 LoadChildrenCallback issue


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 !


Solution

  • 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!
        }),