У меня есть угловой проект.В одном из моих модулей у меня есть маршруты, настроенные следующим образом:
const routes: Routes = [{
path: '',
component: PagesComponent,
children: [
{
path: 'dashboard',
loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule'
},
{
path: 'members',
loadChildren: 'app/pages/members/members.module#MembersModule'
},
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: 'dashboard', pathMatch: 'full' },
],
}];
Маршруты работают хорошо, но есть проблема с отложенной загрузкой.
Если я перехожу кurl /dashboard
и выберите routerLink для /members/add
, MembersModule загружается лениво - все в порядке.Но если я захожу на url /members/add
, а затем нажимаю routerLink на /dashboard
, страница открывается мгновенно, без какой-либо отложенной загрузки, как будто она уже загружена.
Я не понимаю, почему это происходит.
ОБНОВЛЕНИЕ:
На самом верхнем уровне находится AppRoutingModule :
export const routes: Routes = [
{
path: 'auth',
canActivate: [LoggedOutGuard],
loadChildren: 'app/auth/auth.module#AuthModule'
},
{
path: 'pages',
canActivate: [LoggedInGuard],
loadChildren: 'app/pages/pages.module#PagesModule'
},
{ path: '', redirectTo: 'pages', pathMatch: 'full' },
{ path: '**', redirectTo: 'pages' }
];
const config: ExtraOptions = {
useHash: true,
enableTracing: true
};
@NgModule({
imports: [RouterModule.forRoot(routes, config)],
exports: [RouterModule]
})
export class AppRoutingModule {}
PagesCompnent
здесьпросто router-outlet
PagesModule (тот, который я показал ранее):
const routes: Routes = [{
path: '',
component: PagesComponent,
children: [
{
path: 'dashboard',
loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule'
},
{
path: 'members',
loadChildren: 'app/pages/members/members.module#MembersModule'
},
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: 'dashboard', pathMatch: 'full' },
],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PagesRoutingModule {
}
DashboardRoutingModule:
const routes: Routes = [{
path: '',
component: DashboardComponent
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class DashboardRoutingModule {
}
DashboardComponent
- это шаблон
MembersRoutingModule:
const routes: Routes = [{
path: '',
component: MembersComponent,
children: [
{
path: 'add',
loadChildren: 'app/pages/members/add/members-add.module#MembersAddModule'
},
{ path: '', redirectTo: 'add', pathMatch: 'full' },
{ path: '**', redirectTo: 'add', pathMatch: 'full' },
],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class MembersRoutingModule {
}
MembersComponent
вот простой router-outlet
MembersAddModule:
@NgModule({
imports: [
MembersAddRoutingModule,
ThemeModule,
],
declarations: [
MembersAddComponent,
],
})
export class MembersAddModule { }
Я пытался сделать так:
const routes: Routes = [{
path: '',
component: PagesComponent,
children: [
{
path: 'members',
loadChildren: 'app/pages/members/members.module#MembersModule'
},
{
path: 'dashboard',
loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule'
},
{ path: '', redirectTo: 'members', pathMatch: 'full' },
{ path: '**', redirectTo: 'members', pathMatch: 'full' },
],
}];
, но он действует так же ...