Angular 5子路由组件不显示问题求助（含嵌套组件及路由配置）

结合你给出的组件嵌套结构（主应用组件 -> products组件 -> 产品组组件）和现有路由配置，我帮你梳理几个最可能导致子路由不显示的问题及解决方案：

1. 确认ProductsRoutingModule的子路由配置是否正确 #

你只给出了const ro...的开头，首先要确保在ProductsRoutingModule里用children数组定义子路由，并且指定父容器组件：

const routes: Routes = [
  {
    path: '', // 对应父路由`customers/:customerId/contracts/:contractId`的路径后缀
    component: ProductsComponent, // 这个组件是子路由的容器
    children: [
      // 定义产品组组件的子路由
      { path: 'product-groups', component: ProductGroupsComponent },
      // 可选：设置默认重定向，访问父路由时自动加载产品组组件
      { path: '', redirectTo: 'product-groups', pathMatch: 'full' }
    ]
  }
];

这里的核心是：子路由必须嵌套在父路由的children数组中，且父路由要指定对应的容器组件（ProductsComponent）。

2. 确保ProductsComponent模板包含<router-outlet> #

子路由组件是渲染在父组件的<router-outlet>中的，所以ProductsComponent的HTML模板里必须添加这个标签：

<!-- products.component.html -->
<div class="products-container">
  <h3>Products 页面</h3>
  <!-- 产品组组件会在这里渲染 -->
  <router-outlet></router-outlet>
</div>

如果缺少这个标签，子路由组件没有渲染的入口，自然无法显示。

3. 检查路由模块的导入与导出是否规范 #

确认ProductsRoutingModule正确配置了RouterModule的forChild方法并导出：

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

同时，ProductsModule需要声明所有相关组件并导入路由模块：

@NgModule({
  declarations: [ProductsComponent, ProductGroupsComponent],
  imports: [ProductsRoutingModule]
})
export class ProductsModule { }

另外，Angular 5中loadChildren更推荐指向特性模块而非路由模块，你可以把app-routing里的配置改成：

{ 
  path: 'customers/:customerId/contracts/:contractId', 
  loadChildren: './products/products.module#ProductsModule', 
  canActivate: [AuthenticationGuard], 
  data: { breadcrumb: null, animation: 'products' } 
}

这样更符合Angular的特性模块规范。

4. 验证导航路径是否正确 #

当你需要访问产品组组件时，完整路径应该是：
/customers/{customerId}/contracts/{contractId}/product-groups
如果设置了默认重定向，直接访问父路由路径也会自动加载子组件。可以在组件中用以下代码测试导航：

this.router.navigate(['/customers/1/contracts/2/product-groups']);

观察浏览器地址栏变化及页面是否渲染子组件。

5. 排除AuthenticationGuard的影响 #

父路由和根路由都添加了canActivate: [AuthenticationGuard]，要确保这个守卫返回true（用户已通过认证）。可以暂时注释掉canActivate配置，测试路由是否能正常加载，排除守卫拦截的问题。

内容的提问来源于stack exchange，提问作者Steve Fitzsimons