Angular lazyLoading 正在从模块 1 到模块 2 工作，但反之则不行，为什么？

Question

我有一个 Angular 项目。在我的一个模块中，我有一条路线，按以下方式配置：

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 并单击路由器链接到 /members/add，MembersModule 正在延迟加载 - 一切都很好。但是如果我访问 url /members/add 然后点击路由链接到 /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' },
  ],
}];

，但作用是一样的...

Answer 1

{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: 'dashboard', pathMatch: 'full' },

您的基本路线（默认和错误）正在重定向到仪表板，这意味着无论您做什么，要加载的第一个页面都是仪表板页面。

当您在会员页面时尝试重新加载，然后导航，看看会发生什么。

Answer 2

已解决： 我在 PagesModule 中导入了 DashboardModule。现已移除，一切正常。

Angular lazyLoading 正在从模块 1 到模块 2 工作，但反之则不行，为什么？

Angular lazyLoading is working from module 1 to module 2, but not a vice versa, why?

routing

routes

module

lazy-loading

angular