I recently developed a web application using Angular that consists of two main components: the login component and register component. However, I encountered an issue while trying to implement navigation between these components using the routerLink attribute within the <a...> element. Instead of functioning as expected, it transformed the text or nav item into a read-only state.
Interestingly, when I swapped out "routerLink" for "href", the text/nav item became interactive. I've investigated various solutions from forums and the official Angular.io documentation but none have resolved the problem. Additionally, I ensured that RouterModule was properly imported into my app.module.ts file, without success. My development environment includes Angular/CLI 12.2.0, Bootstrap 5, and Typescript 4. Below is the relevant code snippet:
<!-- 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>
// More code goes here...
</ul>
</div>
</div>
</nav>
<!--End of Navbar-->
In my app.module.ts file:
// Necessary imports go here...
@NgModule({
declarations: [
// List of components declared in NgModule
],
imports: [
// Required modules imported here...
],
providers: [SettingsService],
bootstrap: [AppComponent]
})
export class AppModule { }
I am currently facing difficulties implementing navigation between components using the routerLink attribute. Any guidance on how to resolve this issue would be greatly appreciated.