Angular 5嵌套组件路由配置异常求助：路径报错与路由卡顿

我来帮你排查下这个路由配置的问题，看起来有两个关键错误导致了你遇到的异常：

问题分析 #

• 重定向规则不完整：子路由里的空路径重定向缺少pathMatch: 'full'，Angular默认的pathMatch是prefix，这会让空路径匹配所有以/parent开头的路由，导致重定向逻辑混乱，触发无效路径错误。
• 组件名称拼写错误：childBComponent首字母没有大写，应该是ChildBComponent（和ChildAComponent的命名保持一致），这个拼写错误会导致Angular找不到对应的组件，进而引发路由跳转卡顿。

修正后的路由配置 #

{
  "path": "parent", 
  "component": ParentComponent,
  "children": [
    {
      "path": "",
      "redirectTo": "childA",
      "pathMatch": "full"  // 新增：确保只有当路径完全匹配空字符串时才重定向
    },
    {
      "path": "childA",
      "component": ChildAComponent
    },
    {
      "path": "childB",
      "component": ChildBComponent  // 修正：首字母大写，和组件类名一致
    }
  ]
}

关键修改说明 #

1. 添加pathMatch: 'full'：这个配置告诉Angular，只有当当前路径完全等于父路由的路径（也就是/parent）时，才执行重定向到childA，避免了路由匹配的歧义。
2. 修正组件名称大小写：Angular的组件类名采用 PascalCase（大驼峰）命名规则，所以在路由配置里必须严格对应，否则会出现组件找不到的错误，导致页面卡顿。

另外，你的父组件模板只保留<router-outlet></router-outlet>是完全正确的，这是子路由渲染的必要出口，不需要额外修改。

修改完成后，访问/parent会自动重定向到/parent/childA，访问/parent/childA和/parent/childB也能正常加载对应的子组件了。

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