Angular 8+Ionic 5 AOT编译时懒加载报错：Cannot read properties of undefined

错误信息 #

ERROR in Cannot read properties of undefined (reading 'loadChildren')
[ERROR] An error occurred while running subprocess ng.

项目背景 #

应用包含3种用户类型，非AOT编译模式下可正常运行，用户类型需登录后才能确定。对应模块路径：

• src/app/myapp/home-end-user
• src/app/myapp/home-company-user
• src/app/myapp/home-agent-user

当前路由配置 #

通过函数根据用户类型动态返回路由：

export function configHomeRoutes(authService: AuthService) {
    let route: Routes;

    if (authService.currentRol.user_type === 'end_user') {
        route = [{
            path: '',
            loadChildren: () => import('../home-end-user/home-end-user.module').then(m => m.HomeEndUserPageModule),
        }];
    } else if (authService.currentRol.user_type === 'agent_user') {
        route = [{
            path: '',
            loadChildren: () => import('../home-agent-user/home-agent-user.module').then(m => m.HomeAgentUserPageModule),
        }];
    } else if (authService.currentRol.user_type === 'company_user') {
        route = [{
            path: '',
            loadChildren: () => import('../home-company-user/home-company-user.module').then(m => m.HomeCompanyUserPageModule),
        }];
    }

    return route;
}

tsconfig.json配置 #

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

已尝试操作 #

曾尝试将箭头函数导入改为字符串导入，但提示无法找到所需模块。

问题原因及解决方法 #

AOT是静态编译，构建阶段会解析所有路由配置，而当前路由函数依赖运行时的用户类型值，导致编译阶段无法确定loadChildren的具体内容，从而抛出错误。

方案1：预加载路由+守卫动态跳转（推荐） #

1. 注册所有用户类型的子路由，用不同路径区分：

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'end-user', loadChildren: () => import('./home-end-user/home-end-user.module').then(m => m.HomeEndUserPageModule) },
      { path: 'agent-user', loadChildren: () => import('./home-agent-user/home-agent-user.module').then(m => m.HomeAgentUserPageModule) },
      { path: 'company-user', loadChildren: () => import('./home-company-user/home-company-user.module').then(m => m.HomeCompanyUserPageModule) },
    ]
  }
];

2. 创建路由守卫，进入根路径时根据用户类型重定向：

@Injectable({ providedIn: 'root' })
export class HomeRedirectGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): Observable<boolean | UrlTree> {
    const userType = this.authService.currentRol?.user_type;
    switch(userType) {
      case 'end_user':
        return of(this.router.parseUrl('/end-user'));
      case 'agent_user':
        return of(this.router.parseUrl('/agent-user'));
      case 'company_user':
        return of(this.router.parseUrl('/company-user'));
      default:
        return of(this.router.parseUrl('/login'));
    }
  }
}

3. 给根路径配置守卫：

const routes: Routes = [
  {
    path: '',
    canActivate: [HomeRedirectGuard],
    children: [
      // 子路由配置同上
    ]
  }
];

方案2：调整路由为AOT兼容格式（不推荐，会增加包体积） #

提前导入所有模块，让AOT编译能识别到所有可能的路由依赖：

// 提前导入所有模块，确保编译阶段可解析
import('../home-end-user/home-end-user.module');
import('../home-agent-user/home-agent-user.module');
import('../home-company-user/home-company-user.module');

export function configHomeRoutes(authService: AuthService) {
    const routeMap = {
      'end_user': () => import('../home-end-user/home-end-user.module').then(m => m.HomeEndUserPageModule),
      'agent_user': () => import('../home-agent-user/home-agent-user.module').then(m => m.HomeAgentUserPageModule),
      'company_user': () => import('../home-company-user/home-company-user.module').then(m => m.HomeCompanyUserPageModule),
    };

    return [{
      path: '',
      loadChildren: routeMap[authService.currentRol.user_type] || (() => throwError('未知用户类型')),
    }];
}

关于字符串导入的问题 #

Angular 8+推荐使用动态import()语法，字符串格式（如../home-end-user/home-end-user.module#HomeEndUserPageModule）是旧版本写法。若要尝试，需确保：

• 路径相对于当前路由文件的位置正确（比如当前文件在src/app/myapp/下，应写./home-end-user/home-end-user.module#HomeEndUserPageModule）
• 模块名和类名完全匹配（注意大小写）

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