Angular 和 AOT 编译中延迟加载的问题

Question

每当我尝试使用 AOT 编译器选项编译 Angular 8 Ionic 5 应用程序时，都会收到以下错误：

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
  }
}

我尝试将箭头函数导入替换为字符串导入，但我总是收到应用程序无法找到所需模块的错误。

Answer 1

问题是，据我所知，路由定义一定不能在运行时是动态的。您可以在构建时定义路由，但不能在运行时定义。