routerlink always returns to ' '

Issue

I have a problem where my routerlink when clicked always returns me to the '' path of app.routes.ts. While the routerlinks are respectively 'user/teams' and 'user/dashboard'

I can access the pages when I go to "/user/dashboard" or "/user/teams". Only when using routerlink it does not direct me to the right component.

This is my router setup.

This 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 have a second routes file 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 contains 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>

My side menu contains the routerlinks as follows. 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 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 {

}

Hope you can help me out!

Solution

@Naren's answer should resolve your routing issue. For my version:

1. Use loadChildren instead of children for the routes in the app.route.ts

app.route.ts

export const routes: Routes = [
  {
    path: 'user',
    loadComponent: () => UserComponent,
    loadChildren: () => import('./view/user/user.routes').then((m) => m.routes),
  },
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
  },
];

user.routes.ts

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => DashboardComponent,
  },
  {
    path: 'teams',
    loadComponent: () => TeamsComponent,
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'dashboard',
  },
];

2. Import the RouterModule in the SideMenuComponent.

import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.css'],
  standalone: true,
  imports: [RouterModule]
})
export class SideMenuComponent { ... }

3. Also there is typo error, it should be routerLink but not routerlink.

<li>
  <a href="#" routerLink="/user/dashboard" class="nav-link link-body-emphasis">
    ...
  </a>
</li>
<li>
  <a href="#" routerLink="/user/teams" class="nav-link link-body-emphasis">
    ...
  </a>
</li>

Demo @ StackBlitz

Answered By - Yong Shun