Error: Cannot match any routes in Angular 5

Question

As per this SO thread Cannot match any routes, my problem is same but unfortunately I am unable to sort out. The only difference is that my start screen is Login. Main screen have SideNav in which each item contains its path name.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Router, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { AuthguardService } from './authguard.service';
import { SelectpatientComponent } from
    './selectpatient/selectpatient.component';
import { MonitorPatientComponent } from './monitor-patient/monitor-patient.component';

const routes: Routes = [
    {
        path: 'main', component: MainComponent, canActivate: [AuthguardService],
        children: [
            { path: '', canActivate: [AuthguardService], component: SelectpatientComponent },
            {
                path: 'selectpatient', canActivate: [AuthguardService], component: SelectpatientComponent,
                pathMatch: 'full'
            },
            {
                path: 'monitorpatient', canActivate: [AuthguardService], component: MonitorPatientComponent,
                pathMatch: 'full'
            }

        ]
    },
    { path: '', component: LoginComponent, pathMatch: 'full' },
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ],
    providers: []
})
export class AppRoutingModule { }

main.component.html

 <div class="example-container">
    <mat-toolbar class="example-toolbar">
        <button mat-icon-button (click)="snav.toggle()">
            <mat-icon>menu</mat-icon>
        </button>
        <h1 class="example-app-name">Select Patient</h1>
    </mat-toolbar>

    <mat-sidenav-container class="example-sidenav-container">
        <mat-sidenav #snav mode="over" fixedTopGap="56">
            <mat-nav-list>
                <app-menu-list-item *ngFor="let item of navItems" [item]="item"></app-menu-list-item>
            </mat-nav-list>
        </mat-sidenav>
        <router-outlet></router-outlet>
    </mat-sidenav-container>
</div>

The mat-sidenav contains nav items that have route name. nav-item.ts

export interface NavItem {
    displayName: string;
    disabled?: boolean;
    iconName: string;
    route?: string; // <- Contains Route name
    children?: NavItem[];
}

And this is how I am navigating on nav item click:

if (!item.children || !item.children.length) {
  this.router.navigate([item.route]);
  //this.navService.closeNav();
  console.log("onItemSelected");
}

Error Message on browser console:

core.js:1671 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'monitorpatient' Error: Cannot match any routes. URL Segment: 'monitorpatient'

Need help. Thanks in advance. NOTE I have just started Angular, so pardon in advance for such a basic question.

Padhu Padhu · Accepted Answer · 2018-08-16T12:32:03

I guess your item.route has the value of 'monitorpatient' but your actual route is 'main/monitorpatient'. You should be doing

 this.router.navigate(['/', 'main', item.route]);

Error: Cannot match any routes in Angular 5

1 Answers