Error: Cannot match any routes. URL Segment: 'rides'

Question

I am getting this error but do not getting where I am wrong.

the routes are as follows,

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'register-user', component: RegisterUserComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'dash', component: SideNavComponent,
  children: [
    {path: 'rides', component: RidesComponent,  pathMatch: 'full'}
  ]}];

the app.component.html is,

<router-outlet></router-outlet>

SideNavComponent HTML is,

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar> 
      <div class="logo-container">
      <img src="/assets/images/Yaana-logo-white.png" class="logoDiv"/>
      </div>  
    </mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
      <nav class="sidenavbutton">
        <button class="cmpbtn" mat-button (click)="onUserInfoClicked()">User Info<mat-icon id="icon">{{userInfoIcon}}</mat-icon></button>
        <ul class="subbtn" *ngIf="showUserSubs === true">
            <li class="sub-menu"> <a routerLink="/rides" routerLinkActive="active">Rides </a></li>
        </ul>
      </nav>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="accent">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span></span>
    </mat-toolbar>
   <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

The SideNavComponent contains to display the child components of SideNavComponent below the toolbar.

But when I am trying to Navigate to RidesComponent as

http://localhost:4200/dash/rides

, I am getting the following error,

Error: Cannot match any routes. URL Segment: 'rides'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
    at CatchSubscriber.selector (router.js:1340)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1359)
    at CatchSubscriber.selector (router.js:1340)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3662)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

Please correct me where I am wrong.

Index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
</body>
</html>

score 2 · Answer 1 · answered Jun 18 '18 at 08:55

The reason why

<a routerLink="rides" routerLinkActive="active">Rides </a></li>

worked and

<a routerLink="/rides" routerLinkActive="active">Rides </a></li>

this didn't is that,

First one is a relative path where as the second one is absolute path.

So when you click on the first link, angular appends the routerLink to the current path, where as in the second one, angular appends it to the application context root, not taking the current url into consideration.

I hope somebody benefits from this. :).

score 0 · Answer 2 · answered Jun 18 '18 at 06:04

0

It seem you forget to add <base href="/">.Please add this in index.html.

answered Jun 18 '18 at 06:04

baj9032

2,414
3
22
40

I have added it. No issue with that I think – Anil Jun 18 '18 at 06:07

score 0 · Answer 3 · answered Jun 18 '18 at 06:06

0

{path: 'rides', component: RidesComponent} will serve the purpose, you don't need pathMatch: 'full' here, rest looks good to me.

answered Jun 18 '18 at 06:06

Alok G.

1,388
3
15
26

I have experienced a strange behaviour, Please some one explain, when I Open the link from this question page it worked perfectlty fine, but when I am testing through ng serve , it is throwing that error. – Anil Jun 18 '18 at 06:12
Could you please provide complete code sample at https://stackblitz.com/ – Alok G. Jun 18 '18 at 06:12
it's opening from here because you insisted to match full path in your route configuration. – Alok G. Jun 18 '18 at 06:15
No, I have removed it from the routes, i.e I remove match full path from the ride component – Anil Jun 18 '18 at 06:16

score 0 · Accepted Answer · answered Jun 18 '18 at 06:36

0

After some trials, I found out the solution, it was the issue with the routerlink part,

this is the change I have made,

 <li class="sub-menu"> <a routerLink="rides" routerLinkActive="active">Rides </a></li>

Now this works fine.

answered Jun 18 '18 at 06:36

Anil

1,748
8
32
67

score 0 · Answer 5 · answered May 01 '20 at 15:34

0

<li class="sub-menu"> <a routerLink="/dash/rides" routerLinkActive="active">Rides </a></li>

answered May 01 '20 at 15:34

Trilok Singh

1,227
12
10

1

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel May 03 '20 at 07:37

Error: Cannot match any routes. URL Segment: 'rides'

5 Answers5