将延迟加载模块转换为急切加载模块

Question

我想将我的延迟加载模块之一转换为急切加载模块。我的

app-routing.module.ts

中有这段代码：

const accountModule = () => import('./account/account.module').then(x => x.AccountModule);
const adminModule = () => import('./admin/admin.module').then(x => x.AdminModule);
const profileModule = () => import('./profile/profile.module').then(x => x.ProfileModule);
const scheduleModule = () => import('./schedule/schedule-routing.module').then(x => x.ScheduleRoutingModule);


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: '' }
];

我想将

account

转换为急切加载模块。这是我的

account-routing.module

模块：

const routes: Routes = [
    {
        path: '', component: LayoutComponent,
        children: [
            { path: 'login', component: LoginComponent },
            { path: 'register', component: RegisterComponent },
            { path: 'verify-email', component: VerifyEmailComponent },
            { path: 'forgot-password', component: ForgotPasswordComponent },
            { path: 'reset-password', component: ResetPasswordComponent }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AccountRoutingModule { }

我需要在

app-routing.module.ts

Routes

中更改哪些内容才能立即加载

app-routing.module.ts

模块？

Answer 1

您需要直接导入

AccountModule

到

app.module.ts

@NgModule({
  imports: [AccountModule, AppRoutingModule],
  ...

并更新

AccountRoutingModule

中的根路径。

帐户路由.module.ts

{
    path: 'account', component: LayoutComponent,
           ^^^^^^^^
    children: [
        { path: 'login', component: LoginComponent },