Как определить ленивые пути модулей в угловом2 и загрузить определенный модуль для этого пути

63
8

У меня разные компоненты и маршруты, основанные на ролях. Теперь я определил маршруты, как для некоторых компонентов, как показано ниже

Login Module 
path: '', loadChildren:'app/login/login.module#LoginModule';

Register Module
path:'', loadChildren: 'app/register/register.module#LoginModule'

Dashboard Module
path:'' loadChildren:'app/dashboard/dashboard.module#dashboardModule'

User Profile Module
path:'' loadChildren:'app/user-profile/user-profile.module#UserProfileModule'

Теперь всякий раз, когда я перехожу к странице входа или регистрации, все перечисленные модули модулей загружаются вместе, а страница немного задерживается и стекает до тех пор, пока куски модулей не будут загружаться. Кто-нибудь знает, как определить путь и остановить загрузку нежелательного модуля по определенному пути. Заранее благодарю за любую помощь

спросил(а) 2021-01-25T18:46:50+03:00 5 месяцев назад
1
Решение
63

Вам нужно будет указать маршрут под вашим модулем.

Обратите внимание, что все модули с ленивым загрузчиком должны следовать этим трем правилам.

Модуль, который вы хотите ленивой загрузки, должен иметь один родительский маршрут. Не импортируйте модуль в свой app.module.ts. Потому что если вы это сделаете, тогда нет смысла ленивой загрузки Вам нужно будет настроить один маршрут в приложении app.routes.

Поэтому, чтобы ответить на ваш вопрос, вам понадобится такая конфигурация.

{
// Login Module
path: 'login', loadChildren:'app/login/login.module#LoginModule';

// Register Module ,
path:'register', loadChildren: 'app/register/register.module#LoginModule'

// Dashboard Module
path:'dashboard', loadChildren:'app/dashboard/dashboard.module#dashboardModule'

// User Profile Module
path:'profile', loadChildren:'app/user-profile/user-profile.module#UserProfileModule'

}

Поэтому всякий раз, когда вы нажмете login он загрузит #LoginModule. В вашем модуле входа необходимо экспортировать маршруты, подобные этому

const routes: Routes = [
{
path: '',
children: [
{
path: '',
component: YourComponentToLoad
}
]
}
]

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

export class LoginRoutingModule {

}

Кроме того, в вашем app-routing.module.ts вы можете определить стратегию предварительной загрузки следующим образом, чтобы после инициализации приложения, ленивые модули начнут загружаться немедленно. Поэтому, когда пользователь нажимает на ссылку и хочет видеть ленивый загруженный модуль, он будет готов.

app-routing.module.ts

@NgModule({
imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
exports: [RouterModule]
})
export class AppRoutingModule {

ответил(а) 2021-01-25T18:46:50+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема