Error While creating side menu in ionic 4 . Error: Cannot match any routes

Question

I am new to ionic. I want to create a side menu in my application.

app.component.ts

if (localStorage.getItem('userData')) {
      this.router.navigate(['/menu']);
    } else{
      this.router.navigate(['']);
    }

menu.module.ts

const routes: Routes = [
  {
    path: 'menu',
    component: MenuPage,
    children: [
      {
        path: 'tabs',
        loadChildren: () => import('../tabs/tabs.module').then(m => m.TabsPageModule)
      },
      {
        path: 'change-password',
        loadChildren: () => import('../change-password/change-password.module').then(m => m.ChangePasswordPageModule)
      }
    ]
  },
  {
    path: '',
    redirectTo: '/menu/tabs'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MenuPage]
})
export class MenuPageModule { }

menu.page.ts

export class MenuPage implements OnInit {
 pages = [
    {
      title: 'Home',
      url: '/menu/tabs',
      icon: 'home'
    },
    {
      title: 'Change Password',
      url: '/menu/change-password',
      icon: 'lock'
    }
  ];
  selectPath = '';
  constructor(private router: Router) { 
    this.router.events.subscribe((event: RouterEvent) => {
      this.selectPath = event.url;
    });
  }

  ngOnInit() {
  }

}

menu.page.html

<ion-split-pane contentId="content">
  <ion-menu contentId="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content full>

      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectPath === p.url">
            <ion-icon [name]="p.icon" class="margin"></ion-icon>
            {{p.title}}
          </ion-item>
        </ion-menu-toggle>
      </ion-list>

    </ion-content>
  </ion-menu>

  <ion-router-outlet id="content" main></ion-router-outlet>
</ion-split-pane>

app.routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'menu',
    loadChildren: () => import('./menu/menu.module').then( m => m.MenuPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

I am getting an error:

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

score 0 · Answer 1 · answered Mar 04 '20 at 06:55

0

In menu.module.ts, change the path: 'menu', to path: ' '. The way you have done, the route should be menu/menu/tabs. If you change it to ' ', it will have the expected behavior: menu/tabs.

path: '',
component: MenuPage,

answered Mar 04 '20 at 06:55

Lucas Leandro

308
2
11

Error While creating side menu in ionic 4 . Error: Cannot match any routes

1 Answers1