RouterLink shows as normal text Angular

I am new learning Angular when i am trying to add routerLink to my <a> tag it change to text so i cant click in <a> tag can any one tell me where is my problem?

here is my code :
app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SignupComponent } from './signup/signup.component';

export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'signup', component: SignupComponent },
];


app.component

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


navbar.component

<a routerLink ='/'>Home</a>
<a routerLink ='/signup'>Signup</a>


app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SignupComponent } from './signup/signup.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet,HomeComponent,SignupComponent,FormsModule,NavbarComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'my-app';
}

Continue reading...