Angular 20报错：无法绑定‘routerLink’，无@NgModule文件如何解决？

你的问题出在两个地方，直接按下面的步骤修改即可：

1. 修正模板里的routerLink语法错误 #

你写的[routerLink="['/']"]是错误的Angular属性绑定语法，正确写法是**[routerLink]="['/']"**（把引号放到方括号外面）。修改后的navbar.html代码：

<li class="nav-item">
   <a class="nav-link" [routerLink]="['/']" [routerLinkActive]="['active']">Home</a>
</li>
<li class="nav-item">
   <a class="nav-link" [routerLink]="['/contact']" [routerLinkActive]="['active']">Contact</a>
</li>

2. 在独立组件中导入路由模块 #

Angular 20默认使用独立组件，不需要@NgModule，直接在组件的imports数组里导入RouterModule就能启用路由指令。修改后的navbar.ts代码：

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router'; // 导入RouterModule

@Component({
  selector: 'navbar',
  imports: [RouterModule], // 添加到imports数组
  templateUrl: './navbar.html',
  styleUrl: './navbar.scss'
})

export class Navbar {

}

修改完成后，routerLink和routerLinkActive就能正常工作了。

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