Angular 5路由问题：访问/path1时空路径未匹配目标组件

嘿，这个问题我之前踩过坑！大概率是你的路由配置里少了关键的默认子路由设置，咱们一步步捋清楚：

核心原因 #

当你导航到/path1时，Angular确实会加载AuthenticatedLayoutComponent，但它内部的路由出口需要匹配到对应的子路由才能渲染内容。如果你的path1.routing.module里只配置了subpath1的路由，没有匹配空路径的规则，那路由出口自然就没有内容；而/path1/subpath1能正常显示，是因为它刚好命中了已配置的子路由规则。

错误配置示例（你可能现在是这样的） #

假设你的path1.routing.module里的路由是这样的：

const routes: Routes = [
  {
    path: 'subpath1',
    component: Subpath1Component
  }
];

这种情况下，只有访问/path1/subpath1时才有对应的组件渲染，/path1本身没有匹配的子路由，所以布局组件的路由出口是空的。

正确配置修改 #

只需要在path1.routing.module里添加一个匹配空路径的路由，指向Path1Component即可：

const routes: Routes = [
  {
    path: '', // 空路径会匹配/path1的根路径
    component: Path1Component
  },
  {
    path: 'subpath1',
    component: Subpath1Component
  }
];

额外检查点 #

还要确认app.module.routing里的path1路由配置是否正确关联了子路由模块：

const routes: Routes = [
  {
    path: 'path1',
    component: AuthenticatedLayoutComponent,
    // 确保用loadChildren正确加载子路由模块
    loadChildren: () => import('./path1/path1.routing.module').then(m => m.Path1RoutingModule)
    // 或者如果是直接写children数组的话，要确保包含子路由规则
    // children: [
    //   { path: '', component: Path1Component },
    //   { path: 'subpath1', component: Subpath1Component }
    // ]
  }
];

如果这里的关联有误，子路由规则也不会被Angular识别，同样会导致路由出口无内容的问题。

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