Angular报错Can't bind to 'routerLink' 路由无法跳转指定地址问题

报错原因 #

该报错和Angular版本无直接关联，本质是Angular模板编译器无法识别routerLink指令，属于模块导入配置类错误，和贴出的路由规则本身无关。

修复步骤 #

• 第一步：补全模块导入
  routerLink是RouterModule导出的内置指令，只要在使用该指令的组件所属的模块/独立组件中导入对应依赖即可：
  • 若组件属于非独立特性模块：在声明该组件的NgModule的imports数组中加入RouterModule即可，无需重复配置路由规则。如果是根模块AppModule，确认已经导入了写路由规则的AppRoutingModule（CLI生成的路由模块默认会导出RouterModule，如果手动修改过路由模块，记得补全exports: [RouterModule]配置）。
  • 若组件是Angular14+的独立组件：直接在组件装饰器的imports数组中加入RouterLink指令或RouterModule即可，参考代码：

    @Component({
      selector: 'app-category',
      standalone: true,
      imports: [NgFor, NgClass, RouterLink], // 新增RouterLink导入
      templateUrl: './category.component.html'
    })
    export class CategoryComponent {
      // 组件原有逻辑
    }
    

• 第二步：修正routerLink写法
  当前使用字符串插值拼接路由路径的写法存在参数解析隐患，推荐使用属性绑定的数组写法传参，修改后的模板代码：

  <li
    (click)="setCurrentCategory(category)"
    [routerLink]="['/projects/category', category.categoryId]"
    *ngFor="let category of categories"
    [class]="getCurrentCategoryClass(category)"
  >
    {{ category.categoryName }}
  </li>
  

• 额外注意：贴出的路由配置中PorjectAddComponent存在拼写错误（正确拼写应为ProjectAddComponent），该问题不会触发本次routerLink报错，但会导致/projects/add路由跳转失败，记得同步修正。

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