Angular 13升级14后懒加载路由报错：Promise类型不兼容

错误原因 #

Angular 14对路由配置中loadChildren的类型约束做了严格收紧。在Angular 13及更早版本中，返回Promise<NgModule>的写法可以正常通过类型检查，但Angular 14要求loadChildren的返回值必须匹配Type<any>（模块类的引用）或符合新的类型签名。你的代码显式声明返回Promise<DashboardModule>，和Angular 14的类型定义不兼容，因此触发类型错误。

解决方案 #

有两种可行的修复方式：

方式一：简化写法（推荐） #

直接移除loadChildren函数的显式返回类型声明，让TypeScript自动推导正确的类型：

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        redirectTo: '/dashboard/home',
        pathMatch: 'full',
      },
      {
        path: 'dashboard',
        // 移除显式的返回类型声明
        loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardModule),
      },
    ],
  },
  { path: '**', redirectTo: '/dashboard' },
];

方式二：显式声明正确的类型 #

如果需要保留类型声明，需从@angular/core导入Type类型，并将返回类型调整为Promise<Type<DashboardModule>>：

// 先导入Type类型
import { Type } from '@angular/core';

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        redirectTo: '/dashboard/home',
        pathMatch: 'full',
      },
      {
        path: 'dashboard',
        loadChildren: (): Promise<Type<DashboardModule>> => 
          import('../dashboard/dashboard.module').then(m => m.DashboardModule),
      },
    ],
  },
  { path: '**', redirectTo: '/dashboard' },
];

额外建议 #

你的路由配置中使用了relativeLinkResolution: 'legacy'，该配置在Angular 14中已被废弃，若没有特殊兼容需求，建议移除该配置项，避免后续版本的兼容性问题。

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