router links are disabled in angular cli-CodePudding

I am using Angular CLI 13.3.3

Issue details

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

Video of Issue

HTML Code

<a  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 >
    <div >
        <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 >
    <div >
        <a  href="#">Angular CLI </a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
        </button>
        <div  id="navbarColor01">
            <ul >
                
            </ul>
            <ul >
                <li >
                    <a  routerLink="register">Register</a>
                </li>               
                <li >
                    <a  routerLink="">Login</a>
                </li>               
            </ul>
        </div>
    </div>
</nav>

CodePudding user response：

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.

CodePudding user response：

Add <router-outlet></router-outlet> in your app.component.html, it will be worked.

<a routerLink="/user-role-management">link to user component</a>
[routerLink]="['/user-role-management']"

https://angular.io/api/router/RouterLink