Angular Routes are not working in Angular 12

Issue

I created a web application in Angular in which i have components, the login component and register component. Each time i add the element routerLink to the <a...> in order for me to navigate from one component to another, it doesn't work. It turns the text or nav item into a read-only text.

The funny thing is that if i change it from "routerLink" to "href", the text/nav item becomes active. I really don't understand why this is happening. I have followed every suggestion made in this forum similar to this but none actually work when i tried them. I also followed suggestions written on the Angular.io website. It is still the same. i also imported RouterModule into my app.module.ts. It hasn't worked as we speak. I am using Angular/CLI 12.2.0, Bootstrap 5, and Typescript 4. Below is my code

<!-- Navbar-->
<nav
class="
  navbar navbar-transparent navbar-color-on-scroll
  fixed-top
  navbar-expand-lg
"
color-on-scroll="100"
id="sectionsNav"
>
<div class="container-fluid">
  <div class="navbar-translate">
    <a routerLink="#" class="navbar-brand">
      <img
        src="../../../assets/img/comgreen.png"
        width="50"
        height="50"
        alt=""
        class="d-inline-block"
      />
      <strong>Comgreen</strong></a
    >
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbar"
      aria-controls="navbar"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="sr-only">Toggle navigation</span>
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a
          routerLink="/login"
          routerLinkActive="active"
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          target=""
          data-original-title="Log in with your credentials"
        >
          <i class="material-icons">fingerprint</i>Login
        </a>
      </li>
      <li class="nav-item">
        <a
          routerLink="/user-register"
          routerLinkActive="active"
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          target=""
          data-original-title="Don't have an account? Register"
        >
          <i class="fa fa-user-plus"></i>Register
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          target="_blank"
          data-original-title="Follow us on Twitter"
          rel="nofollow"
        >
          <i class="fa fa-twitter"></i>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          routerLink="/hero"
          target="_blank"
          data-original-title="Like us on Facebook"
          rel="nofollow"
        >
          <i class="fa fa-facebook-square"></i>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          routerLink="/hero"
          target="_blank"
          data-original-title="Follow us on Instagram"
          rel="nofollow"
        >
          <i class="fa fa-instagram"></i>
        </a>
      </li>
    </ul>
  </div>
</div>
</nav>
<!--End of Navbar-->

My app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {RouterModule } from '@angular/router';

import { FooterComponent } from './shared/footer/footer.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatMenuModule } from '@angular/material/menu';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SidebarComponent } from './sidebar/sidebar.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import { MsgiconbtnComponent } from './shared/msgiconbtn/msgiconbtn.component';
import { SettingsService } from './services/settings.service';
import { HomeComponent } from './dashboard/home/home.component';
import { CropComponent } from './dashboard/crop/crop.component';
import { FarmersComponent } from './dashboard/farmers/farmers.component';
import { InsuranceComponent } from './dashboard/insurance/insurance.component';
import { ImagecardComponent } from './shared/imagecard/imagecard.component';
import { AddNewCropDialogModule } from './shared/dialog/add-new-crop-dialog/add-new-crop-dialog.module';
import { AddNewFarmerDialogModule } from './shared/dialog/add-new-farmer-dialog/add-new-farmer-dialog.module';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireModule } from '@angular/fire';
import { environment } from 'src/environments/environment';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { MorecropinfoModule } from './shared/dialog/morecropinfo/morecropinfo.module';
import { UpdateCropInfoModule } from './shared/dialog/update-crop-info/update-crop-info.module';
import { SplashComponent } from './pages/splash/splash.component';
import { HeaderComponent } from './shared/header/header.component';
import { ReactiveFormsModule } from '@angular/forms';
import { userRegisterComponent } from './pages/userregister/userRegister.component';
import { VerifyEmailComponent } from './pages/verify-email/verify-email.component';
import { ForgotPasswordComponent } from './pages/forgot-password/forgot-password.component';
import { LoginComponent } from './pages/login/login.component';
import { RegisterUserComponent } from './pages/register-user/register-user.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,    
    FooterComponent,
    SidebarComponent,
    NavbarComponent,
    MsgiconbtnComponent,
    HomeComponent,
    CropComponent,
    FarmersComponent,
    InsuranceComponent,
    ImagecardComponent,
    SplashComponent,
    userRegisterComponent,
    LoginComponent,
    VerifyEmailComponent,
    ForgotPasswordComponent,
    userRegisterComponent,
    RegisterUserComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    RouterModule,
    MatInputModule,
    MatButtonModule,
    MatCheckboxModule,
    MatMenuModule,
    HttpClientModule,
    MorecropinfoModule,
    AddNewCropDialogModule,
    AddNewFarmerDialogModule,
    UpdateCropInfoModule,
    BrowserAnimationsModule,
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  providers: [SettingsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Where am i going wrong?

Solution

I don't know if it would make a difference but in my project I moved the routerLinkActive = "active" to the html li tag. Maybe it does also work for you...

<li class="nav-item"
    routerLinkActive="active">
    <a
      routerLink="/login"
      class="nav-link"
      rel="tooltip"
      title=""
      data-placement="bottom"
      target=""
      data-original-title="Log in with your credentials"
    >
      <i class="material-icons">fingerprint</i>Login
    </a>
  </li>

Answered By - LeiseLeo