I am facing an issue where my routerlink does not redirect me to the correct path in app.routes.ts when clicked. Even though the routerlinks are set as 'user/teams' and 'user/dashboard' respectively.
I can access the pages by directly going to "/user/dashboard" or "/user/teams", but when using routerlink, it navigates me to the wrong component.
This is how I have configured my router:
Here is my app.routes.ts:
import { Routes } from '@angular/router';
import { HomeComponent } from './view/home/home.component';
import { UserComponent } from './shared/layouts/user/user.component';
export const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: HomeComponent
},
{
path:'user',
loadComponent: () => UserComponent,
children: [
{
path:'',
loadChildren: () => import('./view/user/user.routes').then((m) => m.routes)
}
]
}
];
I also have a separate routes file named user.routes.ts:
import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TeamsComponent } from './teams/teams.component';
export const routes: Routes = [
{
path: 'dashboard',
loadComponent: () => DashboardComponent,
},
{
path:'teams',
loadComponent: () => TeamsComponent
}
,
{
path: '',
pathMatch: 'full',
redirectTo: 'dashbaord',
}
];
Here is my user.component.html which includes the <router-outlet>.
<main class="d-flex flex-nowrap">
<app-side-menu></app-side-menu>
<div class="container-fluid p-5">
<router-outlet></router-outlet>
</div>
</main>
The side menu in my application contains the following routerlinks. The side-menu.component.html:
<li>
<a href="#" routerlink="/user/dashboard" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
Dashboard
</a>
</li>
<li>
<a href="#" routerlink="/user/teams" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
My Teams
</a>
</li>
and this is the implementation in side-menu.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-side-menu',
standalone: true,
imports: [],
templateUrl: './side-menu.component.html',
styleUrl: './side-menu.component.scss'
})
export class SideMenuComponent {
}
I appreciate any assistance with resolving this issue!