Problem description

When I create a navigation in the template, the links I’ve created are not clickable. This issue exists in Angular version 17 and above.

How to reproduce it

app.component.html

  <nav>
    <a routerLink="/">Home</a>
    <a routerLink="/about">About</a>
  </nav>

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
}

Solution

You have to import RouterLink.

app.component.ts

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
}