具有多个组件的延迟加载功能模块在 Angular 6 中不起作用答案

【问题标题】：Lazy loading feature modules with multiple components doesn't work in angular 6具有多个组件的延迟加载功能模块在 Angular 6 中不起作用
【发布时间】：2018-09-23 19:32:37
【问题描述】：

我有一个customer 模块和customer-routing 模块：

const routes: Routes = [
  {
    path: '', component: CustomerComponent,
    children: [
      { path: 'edit', component: EditCustomerComponent }
    ]
  }
];

这是我的app-routing 模块：

const routes: Routes = [
  { path: 'customers/:id', loadChildren: './customer/customer.module#CustomerModule' },
  { path: 'login', component: LoginComponent}
];

但是当我遵循customers/3/edit 这样的路径时，它总是显示CustomerComponent 而不是EditCustomerComponent。

也许延迟加载不起作用？

PS：我使用的是 Angular 6.1.0

更新：我的客户模块

import {ReactiveFormsModule} from '@angular/forms';
import {CustomerComponent} from './customer.component';
import {EditCustomerComponent} from './edit-customer.component';

@NgModule({
  imports: [
    CommonModule,
    CustomerRoutingModule,
    ReactiveFormsModule
  ],
  declarations: [CustomerComponent, EditCustomerComponent]
})
export class CustomerModule { }

【问题讨论】：

你能enable tracing 并显示输出吗？
另外，您的 CustomerModule 是如何定义的？
@LazarLjubenović 添加了此配置，但我在控制台中看不到任何内容
@Pac0 添加了我的客户模块
CustomerComponent 的 HTML 中是否有路由器插座？对我来说，路由器配置似乎很好

标签： angular angular6

【解决方案1】：

您不必将编辑路线放在子项下。您的客户路由模块将如下所示：

const routes: Routes = [
  { path: '', component: CustomerComponent },
  { path: 'edit', component: EditCustomerComponent }
];

还要确保检查此路由数组是否已在您的客户路由模块中使用 forChild 函数导入，如下所示：

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CustomerRoutingModule { }

希望这能解决您的路由问题。

【讨论】：