router links are disabled in angular cli

Question

I am using Angular CLI 13.3.3

Issue details

Router Links are not working. It seems disabled. Not even clickable.

Video of Issue

Issue described in video. Please click here

Rendered Html in Browser

HTML Code

<a class="nav-link" routerLink="user-role-management">Users</a>

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppComponent,
        AnnonymousbaseComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        NgbModule,
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

app.component.html

<header></header>
<div class="container-fluid">
    <div class="row justify-content-center">
        <router-outlet></router-outlet>
    </div>
</div>

App Routing Module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import {UsermanagementComponent} from './usermanagement/usermanagement.component';
import { CommonModule } from '@angular/common';

const routes: Routes = [
    {
        component: UsermanagementComponent,
        path: 'user-role-management'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true }), CommonModule],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Am I missing anything? if you need more information, please do let me know.

Edit - 1

This specific issue is coming in the navbar only.

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Angular CLI </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" routerLink="register">Register</a>
                </li>               
                <li class="nav-item">
                    <a class="nav-link" routerLink="">Login</a>
                </li>               
            </ul>
        </div>
    </div>
</nav>

Answer 1

You could try using the [routerLink] directive. Make sure that declarations in app.module.ts contains the components you want to use the [routerLink] in. Also you might have to import RouterModule in app.module.ts?! I made a quick StackBlitz example for this.

I don't know why these components aren't automatically put inside declarations when generating them but that should fix the problem and make the Links clickable.

These are the links in list.component.html:

<ul>
  <li><a [routerLink]="['/details', '1']">Product 1</a></li>
  <li><a [routerLink]="['/details', 2]">Product 2</a></li>
</ul>

And this is app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { RouterModule } from '@angular/router'; // This was the missing import.
import { DetailsComponent } from './details/details.component';
import { ListComponent } from './list/list.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: ListComponent },
      { path: 'details/:id', component: DetailsComponent },
    ]),
    RouterModule,
  ],
  declarations: [AppComponent, HelloComponent, ListComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}