Зацикливание тега "<a>" с ошибкой броска routerLink?

Question

Я новичок в Angular. Вот мой код. Код ниже выдает ошибку. Если я заменю тэг <a> на кнопку, это сработает. Вы можете просмотреть ошибку в моем s c https://i.stack.imgur.com/qDaw4.png

<div class="item userItem" *ngFor="let friend of friends">
  <a class="btn-ask icon-caret-right" routerLink="/{{friend.username}}">
      Ask
      <fa-icon [icon]="faAngleRight"></fa-icon>
  </a>
  <a class="icon-star"  routerLink="/{{friend.username}}">
    <fa-icon [icon]="faStar"></fa-icon>
  </a>

  <img class="userAvatar userMood userMood-26"src="https://d15eldcwi10xcl.cloudfront.net/ee7/e9161/a3e2/43c8/b27b/c52a5703c5f9/thumb/1005453.jpg" alt="">

  <a class="userItem_content"  routerLink="/{{friend.username}}">
    <span class="userName">{{friend.name}}</span>
    <span class="userName" dir="ltr">@{{friend.username}}</span>
  </a>
</div>