ASP.NET Core + Angular routing not working

Question

I'm trying to implement the routing of my SPA application, but it simply won't work, i don't know what i am doing wrong here, i saw many tutorials, and i can't find the problem. Am i missing something?

First, i've setup my routes for two components, the login and the register.

app.routes.ts

import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

export const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent }

];

Then i import the route component in my app.component.ts

import { Component } from '@angular/core';
import { CoursesComponent } from './courses.component';
import { AuthorComponent } from './author/author.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [CoursesComponent, AuthorComponent, NavbarComponent, FooterComponent, RouterOutlet],
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  title = 'angular app';
}

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>

I implemented the buttons with the routerLink property on my navbar.component.html

<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <div class="m-1" >
        <a class="btn btn-primary m-1" routerLink="./login">Login</a>
        <a class="btn btn-primary m-1" routerLink="./register">Register</a>
      </div>      
    </div>
  </div>
</nav>

login.component.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {

}

I clicked on the button on my navbar component, and the redirect didn't happen, actually, nothing happened.

Answer 1

To make the router work, you should import the RouterLink directive as follows in the NavComponent module or component

navbar.component.html

@Component({
  selector: 'app-login',
  standalone: true, //If nav component is standalone add it here else add it in module
  imports: [RouterLink]
})
class NavComponent{}