Question

我有一个带有路由器插座的root应用程序组件，并且路由是从家庭模块路由加载的，这些路由在子路由中使用与loadchildren的延迟加载。在家庭组件中有一个路由器插座，并且在家庭的所有子模块中都有延迟加载的路由器插座。路由工作正常，但子路由也在根路由器插座中加载。 例如： - 组件'testCreateComponent'正在加载localhost：4200 / test / create以及localhost：4200 / create。

示例代码级别如下： -

app.component.html

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

应用-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>

测试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 函数中内联）中也被错误地显式/急切地导入。< /p>

为了在一个庞大的项目中轻松找到它们，我认为我们将路由器配置为 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

在路由中使用loadchildren时，Angular 5子路由在根级路由器插座处加载

1 个答案: