Проблемы с использованием роутера в Angular 9

Question

Я пытаюсь собрать верхнюю панель навигации. Таким образом, при загрузке приложения оно будет иметь горизонтальную панель навигации. Вот что у меня есть:

app.routing.ts

import { TopNavigationComponent } from './top-navigation/top-navigation-component/top-navigation-component';
import { Routes } from '@angular/router';

export const AppRoutes: Routes = [
  {
    path: '',
    component: TopNavigationComponent,
    children: [
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      },
    ]
  }
];

TopNavigationComponent.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  templateUrl: './top-navigation-component.html',
  styleUrls: ['./top-navigation-component.css']
})
export class TopNavigationComponent implements OnInit {
  navLinks: any[];
  activeLinkIndex = -1;
  constructor(private router: Router) {
    this.navLinks = [
        {
            label: 'System Preferences',
            link: 'home',
            index: 0
        }
    ];
}
ngOnInit(): void {
    this.router.events.subscribe((res) => {
        this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url));
    });
  }
}

top-navigation-component. html

<nav mat-tab-nav-bar>
  <a mat-tab-link
    *ngFor="let link of navLinks"
    [routerLink]="link.link"
    routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive">{{link.label}}
  </a>
</nav>

Вот ошибки, которые я получаю, когда служу:

ERROR in projects/prism/src/app/top-navigation/top-navigation-component/top-navigation-component.html:4:5 - error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.

4     [routerLink]="link.link"
      ~~~~~~~~~~~~~~~~~~~~~~~~

  projects/prism/src/app/top-navigation/top-navigation-component/top-navigation-component.ts:5:16
    5   templateUrl: './top-navigation-component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TopNavigationComponent.
projects/prism/src/app/top-navigation/top-navigation-component/top-navigation-component.html:6:5 - error NG8002: Can't bind to 'active' since it isn't a known property of 'a'.

6     [active]="rla.isActive">{{link.label}}
      ~~~~~~~~~~~~~~~~~~~~~~~

  projects/prism/src/app/top-navigation/top-navigation-component/top-navigation-component.ts:5:16
    5   templateUrl: './top-navigation-component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TopNavigationComponent.
projects/prism/src/app/top-navigation/top-navigation-component/top-navigation-component.html:5:28 - error NG8003: No directive found with exportAs 'routerLinkActive'.

5     routerLinkActive #rla="routerLinkActive"
                             ~~~~~~~~~~~~~~~~

  projects/prism/src/app/top-navigation/top-navigation-component/top-navigation-component.ts:5:16
    5   templateUrl: './top-navigation-component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TopNavigationComponent.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Буду очень признателен за помощь. Спасибо