Angular路由报错Cannot match any routes URL Segment: 'work-groups'求助

核心错误原因 #

Angular路由配置的path属性禁止添加前导斜杠/，你当前app.routing.ts中/work-groups的写法不符合路由规则，导致路由匹配失败。同时HTML标签中的空href属性会触发浏览器原生跳转，和Angular路由逻辑冲突。

修复步骤 #

• 修改app.routing.ts路由配置，删除path字段的前导斜杠：

// 修改前
{ path: '/work-groups', component: ListWorkGroupComponent }

// 修改后
{ path: 'work-groups', component: ListWorkGroupComponent }

• 修改HTML跳转标签，删除多余的空href属性：

<!-- 修改前 -->
<a href="" class="dash-nav-dropdown-item" routerLink="/work-groups" routerLinkActive="active">Work Groups</a>

<!-- 修改后 -->
<a class="dash-nav-dropdown-item" routerLink="/work-groups" routerLinkActive="active">Work Groups</a>

• 额外检查项：确认app.component.html中存在路由出口标签<router-outlet></router-outlet>，没有的话需要补充，否则路由匹配成功后组件也无法正常渲染。

额外不规范配置提示 #

你当前app.module.ts的providers数组中注册了多个组件（AppComponent、ItemWorkGroupComponent等），组件不需要注册到providers中，只有公共服务才需要在此处注册，建议删除这部分组件注册配置，避免后续出现依赖注入异常。

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