在路由中使用 loadchildren 时，Angular 5 子路由在根级路由器导出加载

Question

我有一个带有路由器 socket 的根应用程序组件，并且路由是从主模块路由加载的，该路由在其子路由中使用带有 loadchildren 的延迟加载。家庭组件中有一个路由器 socket ，家庭的所有子模块中也有路由器 socket ，它们是延迟加载的。路由工作正常，但子路由也在根路由器 socket 中加载。 例如:- 组件“testCreateComponent”正在加载 localhost:4200/test/create 和 localhost:4200/create。

示例代码级别如下:-

app.component.html

<div>app</div>
<router-outlet></router-outlet>

app-routing.module.ts

export const APP_ROUTES: Routes = [
    {path: '**', redirectTo: '', pathMatch: 'full'}
];

home.component.html

<div>home</div>
<router-outlet><router-outlet>

home-routing.module.ts

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  canActivate: [LoggedUserGuard],
  canActivateChild: [AuthGuard],
  children: [
    {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
    {
      path: 'test',
      loadChildren: () => testModule
    },
    {
      path: 'dashboard',
      component: DashboardComponent,
      data: {
        breadcrumb: 'Dashboard'
      }
    },
    {
      path: 'dummy',
      loadChildren: () => dummyModule,
    }
  ]
}];

testComponent.html

<div>Test</test>
<router-outlet></router-outlet>

test-routing.module.ts

const routes: Routes = [{
  path: '',
  component: TestComponent,
  children: [
    {path: '', component: ListComponent,
      data: {
        breadcrumb: 'List'
      }},
    {path: 'create', component: testCreateComponent},
    { path: 'detail/:id',
      component: TestEditComponent,
    }
  ]
}];

Answer 1

问题可能在于您如何导入延迟加载的模块。
我们在延迟加载的模块中遇到了类似的问题，这些模块在模块文件顶部的 TypeScript 导入部分中也被错误地显式/急切地导入(而不是仅在 loadChildren 函数中内联)。
为了在一个庞大的项目中方便地找到它们，我想我们用preloadingStrategy: PreloadAllModules配置了路由器。 , 登出 router.config ，并检查了路线及其组成部分。从模块顶部的 TypeScript 导入部分中删除导入(并且只保留它们内联)修复了该问题。
尝试删除

import { testModule } from "./path/to/file/containing/test.module";

从文件顶部开始，而是在路由中仅使用以下内容

loadChildren: () => import("./path/to/file/containing/test.module").then((m) => m.testModule)

另请查看 Angular Docs: Troubleshooting lazy-loading modules