Angular Routes are not working in Angular 12 - html

Question

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?

Answer 1

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>

Answer 2

Try with square brackets, just like it was array of path elements:
<a [routerLink]="['/user-register']">Link</a>
Then if you want deeper it would look like this:
// const userId = '12345';
<a [routerLink]="['/user', 'profile', userId]">Link</a>
This will redirect you to localhost:4200/user/profile/12345
And if we are talking about style of link, like underline/color change on hover, just use some css:
a {
color: black;
cursor: pointer;
}
a:hover {
color: red;
text-decoration: underline;
} // ...etc whatever you need