8

我有一个带有路由器出口的根应用程序组件，并且路由是从主模块路由加载的，该路由在其子路由中使用带有 loadchildren 的延迟加载。在 home 组件中有一个 router-outlet，在 home 的所有子模块中都有 router-outlet，它们是延迟加载的。路由工作正常，但子路由也被加载到根路由器出口中。例如：- 组件“testCreateComponent”正在加载 localhost:4200/test/create 以及 localhost:4200/create。

示例代码级别如下：-

app.component.html

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

应用程序路由.module.ts

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

home.component.html

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

家庭路由.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,
    }
  ]
}];

测试组件.html

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

测试路由.module.ts

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

1 回答 1

2

问题可能在于您如何导入延迟加载的模块。

我们在延迟加载的模块中遇到了类似的问题，这些模块在模块文件顶部的 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 文档：对延迟加载模块进行故障排除

于 2021-06-25T07:40:21.093 回答