在路由中使用加载子路由时，角5子路由在根级别路由器出口加载

Question

我有一个带有路由器插座的根应用程序组件，并且路由是从家庭模块路由加载的，该路由在其子路由中使用延迟加载和 loadchildren。家庭组件中有一个路由器插座，在家庭的所有子模块中也有延迟加载的路由器插座。路由工作正常，但子路由也加载到根路由器出口中。例如：- 组件“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导入部分（而不是仅在＜code＞loadChildren＜/code＞函数中内联）。

为了在一个巨大的项目中轻松找到它们，我认为我们用preloading策略配置了路由器：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：延迟加载模块故障排除