Angular Routing Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/profile'

0
votes

I am suddenly getting Error: Cannot match any route since I started working on lazy loading module in my angular project.

So right now I have two modules

  • IndexModule
  • TeacherDashboardModule

In TeacherDashboardModule , I have following components :

  • dashboard
  • profile
  • top-nav

Dashboard and Profile are 2 seperate pages where top-nav sits above on both of them.

TopNavComponent has a dropdown as shown below

<ul class="navbar-nav ml-auto mt-2 mt-lg-0 navbar-right">
    <li class="nav-item dropdown">
      <a class="nav-link" class="dropdown-toggle" data-toggle="dropdown">
        <img src="{{user.photoUrl}}" />
        <strong>{{user.firstName}}</strong>
        <span class="glyphicon glyphicon-chevron-down"></span>
      </a>
      <ul class="dropdown-menu">
        <li> <a routerLink = "profile">Profile</a> </li>
        <li> <a routerLink="settings">Settings</a> </li>
        <li> <a routerLink="dashboard"> Dashboard </a> </li>
        <li> <a routerLink = "blog">Blog</a> </li>            
        <li> <a href="javascript:void(0)">Privacy Policy</a> </li>
        <li> <a href = "javascript:void(0)" (click) = "logout()">Logout</a> </li>
      </ul>
    </li>
  </ul>

So when I click on a link for example profile , I get this error :

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/profile' Error: Cannot match any routes. URL Segment: 'dashboard/profile'

Problem is I intent to keep dashboard and profile pages seperate so when I click on dashboard , It should go to localhost:4200/dashboard and when I click on profile it should go to localhost:4200/profile

Here is my routes in teacher-dashboard-routing.module.ts : 

const routes: Routes = [


  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'profile',
    component: ProfileComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  }



];

I understand what is happening, I am not sure how to fix this thing. Can I make it so that it takes absolute path instead of relative ?

1
angularangular-routing

1 Answers

0
votes

You can use relative paths, like so: <li> <a routerLink = "../profile">Profile</a> </li>