Angular懒加载下SharedModule的MainComponent无法显示child1等子组件

核心问题说明 #

1. 根路由中/home路径直接绑定HomeComponent，未关联HomeRoutingModule中定义的子路由规则，导致MainComponent的路由配置完全未生效
2. HomeComponent模板中缺少<router-outlet>标签，无法承载子路由返回的MainComponent
3. 页面中跳转链接的路径前缀缺失/home，和实际路由结构不匹配

具体修改步骤 #

1. 修改AppRoutingModule路由配置 #

删除AppModule中imports数组里的HomeModule（避免重复导入），将根路由中Home相关规则调整为懒加载模式：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'login', component: LoginComponent},
  { 
    path: 'home', 
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  { path: '**', redirectTo: '/home' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false})],
  exports: [RouterModule],
})
export class AppRoutingModule {}

2. 修改HomeComponent模板 #

添加<router-outlet>承载子路由，同时修正跳转链接的完整路径：

<h1>I am home</h1>
<a routerLink="/home/cust/features/child1">child1</a>
<a routerLink="/home/cust/features/child2">child2</a>
<a routerLink="/home/cust/features/child3">child3</a>
<!-- 新增路由出口承载MainComponent -->
<router-outlet></router-outlet>

3. 路由层级验证参考 #

修改后完整路由层级如下，可对照检查：

• /home → 根路由出口渲染HomeComponent
• /home的子路由空路径 → HomeComponent路由出口渲染MainComponent
• /home/cust → MainComponent路由出口加载FeaturesModule
• /home/cust/features → 加载ChildrensModule
• /home/cust/features/child1 → MainComponent路由出口渲染Child1Component

内容的提问来源于stack exchange，提问作者study clan