Error: Cannot match any routes in Angular 5


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.


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
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' },

    imports: [
    exports: [
    providers: []
export class AppRoutingModule { }


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

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

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

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) {

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.


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]);

Answered By – Padhu

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.