Angular特性模块路由问题：根路径意外加载子组件如何解决

这个问题的核心原因大概率是你把ChildModule直接导入到了AppModule中——虽然你在app-routing.module.ts里配置了懒加载，但如果ChildModule已经被显式添加到AppModule的imports数组里，Angular会把它的路由合并到根路由表中，这样子路由里的path: ''就会匹配根路径/，导致你看到的意外加载情况。

修复步骤： #

1. 移除AppModule中的ChildModule导入
   打开app.module.ts，找到imports数组，确保里面没有ChildModule。正确示例如下：

   // app.module.ts
   imports: [
     BrowserModule,
     AppRoutingModule // 只保留路由模块，不要添加ChildModule
   ]
   

2. 确认懒加载路由配置规范
   你的app-routing.module.ts基础配置是对的，但如果是Angular 8及以上版本，推荐使用更规范的动态import语法替代字符串路径写法：

   // app-routing.module.ts
   const routes: Routes = [
     { path: 'xyz', loadChildren: () => import('./child/child.module').then(m => m.ChildModule) }
   ];
   

3. 可选：添加根路由默认规则
   为了避免根路径/出现空白或意外匹配，你可以添加默认重定向或404路由：

   // app-routing.module.ts
   const routes: Routes = [
     { path: 'xyz', loadChildren: () => import('./child/child.module').then(m => m.ChildModule) },
     { path: '', redirectTo: '/home', pathMatch: 'full' }, // 重定向到指定页面
     { path: '**', component: NotFoundComponent } // 404页面组件
   ];
   

原理说明： #

Angular的懒加载模块必须满足两个条件才能实现真正的按需加载：

• 不在AppModule或其他已加载模块的imports中被显式导入
• 通过loadChildren配置路由

如果违反第一个条件，模块会被立即加载，它的路由会被合并到根路由树中，子路由的空路径就会和根路径/匹配，这就是你遇到问题的根源。

内容的提问来源于stack exchange，提问作者Vishnudev Krishnadas