如何将Angular项目中懒加载的Account模块改为即时加载？

要把Account模块从懒加载改为即时加载，需要对app-routing.module.ts做以下两处修改：

1. 替换动态导入为静态导入 #

删除原来的动态导入语句，改为直接静态导入AccountModule：

// 删除这行动态导入
// const accountModule = () => import('./account/account.module').then(x => x.AccountModule);

// 添加静态导入
import { AccountModule } from './account/account.module';

2. 修改路由配置中的loadChildren值 #

将路由里account项的loadChildren从指向动态导入函数，改为指向静态导入的模块类：

const routes: Routes = [
    { path: '', component: HomeComponent, canActivate: [AuthGuard] },
    // 修改这一行
    { path: 'account', loadChildren: () => AccountModule },
    { path: 'profile', loadChildren: profileModule, canActivate: [AuthGuard] },
    { path: 'admin', loadChildren: adminModule, canActivate: [AuthGuard], data: { roles: [Role.Admin] } },
    { path: 'schedule', loadChildren: scheduleModule },
    { path: 'report', component: RaportForDateComponent },
    { path: 'floating', component: FloatingSchedulesComponent },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

修改原理 #

• 懒加载依赖import()动态导入语法，只有当用户访问/account路径时才会加载Account模块代码；
• 静态导入后，Account模块会在应用启动时就被打包并加载，实现即时加载的效果，同时保留模块自身的路由配置（AccountRoutingModule中的子路由依然生效）。

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