Angular嵌套懒加载问题：HomeModule已加载但未在router-outlet中渲染

问题核心：懒加载的HomeModule未配置自身路由，导致Angular无法找到对应的组件渲染规则。

解决方案：为HomeModule添加路由配置 #

修改home.module.ts，添加路由定义并通过RouterModule.forChild注册：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';

// 定义HomeModule的路由规则
const routes: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes) // 注册子路由
  ]
})
export class HomeModule { }

原因说明 #

当使用loadChildren懒加载模块时，Angular要求该模块必须自行配置路由并通过RouterModule.forChild()注册。之前的HomeModule仅声明了组件但未配置路由，Angular加载模块后没有对应的规则将HomeComponent挂载到MainComponent的<router-outlet>中，因此无法渲染。

而取消懒加载直接使用component: HomeComponent时，路由规则直接定义在MainModule中，Angular能直接找到组件并执行渲染逻辑，所以可以正常显示。

内容的提问来源于stack exchange，提问作者mr.Deviant