CODEWITHSUNDEEP
angulartypescriptroutes
Elizabeth Alcalá
Elizabeth Alcalá

Reputation: 363

Angular submodules children routes not working. Cannot match any routes

I'm facing this error when creating a module with children routes and trying to navigate between them.

app-routing.module.ts

const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: '/login' },
   { path: 'login', component: LoginComponent },
   { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', 
     canActivate: [AuthGuard] },

app/admin/admin-routing.module.ts

 const routes: Routes = [
  {
    path: "",
    redirectTo: "welcome",
    pathMatch: "full"
  },
  {
    path: "",
    component: AdminComponent,
    children: [
      {
        path: "welcome",
        component: WelcomeComponent
      },
      {
        path: "challenge/leaders",
        component: ChallengeLeadersComponent
      },
      {
        path: "challenge/collaborators/:id",
        component: ChallengeCollaboratorsComponent
      }
    ]
  }
];

app/admin/components/challenge/challenge-leaders.html

  <a [routerLink]="['challenge/collaborators', user.id]">

And the error I get is

Error: Cannot match any routes. URL Segment: 'admin/challenge/leaders/challenge/collaborators/ab5738'

Upvotes: 2

Views: 4190

Answers (2)

Dipal
Dipal

Reputation: 184

Hi actually you have problem with your router link. Your error shown as "Error: Cannot match any routes. URL Segment: 'admin/challenge/leaders/challenge/collaborators/ab5738'"

the path should be 'admin/challenge/collaborators/ab5738' instead of 'admin/challenge/leaders/challenge/collaborators/ab5738

You can set your Router link to absolute or relative path; You can check this answer for more clarification. https://stackoverflow.com/a/38216918/1506955

Upvotes: 0

Suryan
Suryan

Reputation: 659

It's because you have specified two empty routes for /admin i.e. redirectTo welcome and other for AdminComponent. Instead your first empty route should be in the children array and you don't specified any of the route for challenge. challenge/leaders should be in the children of challenge.

const routes: Routes = [
  {
    path: "",   // This is /admin
    component: AdminComponent,
    children: [
  {
    path: "welcome",  // This is /admin/welcome
    component: WelcomeComponent
  },
  {
    path: "challenge",  // This is /admin/challenge
    component: ChallengeComponent,
    children: [
     { path: 'leader', component: ChallengeLeaderComponent }, // This is /admin/challenge/leader
     { path: 'collaborators', component: ChallengeCollaboratorsComponent }, // This one is /admin/challenge/collaborators
     { path: 'collaborators/:id', component: ChallengeCollaboratorComponent }, // This one is /admin/challenge/collaborators/someId
     { path: '', redirectTo: 'leader', pathMatch: 'full' }
   ]
  },
  {
    path: "",
    redirectTo: "welcome",
    pathMatch: "full"
  }
 ]}
];

Upvotes: 2

Related Questions