Angular懒加载路由报错Cannot match any routes 'home/product'求助

Angular路由无法匹配/home/product的核心原因是Home模块及其内部定义的子路由规则未被全局路由系统正确识别，同时缺少子路由渲染入口，具体错误点如下：

• AppModule未注册HomeModule的路由规则，HomeRoutingModule中定义的二级路由完全没有被Angular加载
• HomeComponent模板中没有添加<router-outlet>占位符，就算路由匹配成功，子路由的组件也没有渲染入口
• 原AppRoutingModule中/home路由仅直接绑定了HomeComponent，没有预留子路由挂载逻辑

1. 调整App路由配置 #

修改app-routing.module.ts中的路由规则，将/home改为懒加载Home模块，自动关联Home模块内部的路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

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

2. 调整Home模块路由配置 #

修改home-routing.module.ts，将HomeComponent挂载到Home模块的根路由：

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

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product', loadChildren: () => import('./feature/product/product.module').then(m => m.ProductModule)}
];

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

注：请根据你实际的ProductModule存放路径调整import路径，确保路径匹配

3. 给Home组件添加子路由入口 #

修改home.component.html，添加<router-outlet>作为子路由的渲染占位：

<p>home works! homecomponent.html</p>
<router-outlet></router-outlet>

修改完成后重启开发服务，访问/home/product，页面同时显示home组件和product1组件的内容即为配置成功。

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