CODEWITHSUNDEEP
angularmaster-detailionic5
detourOfReason
detourOfReason

Reputation: 335

ionic 5 routing error: Cannot find any routes

New Ionic 5 project. I am trying to add pages to the "tabs" folder in order to keep the tab bar at the bottom. I have added to pages via the CLI. The pages and routes as usual are added two the app-routing.module.ts and everything works fine. I created a button on tab1.page.ts and can navigate to both new pages.

One page basic function on tab1.page.ts is:

goToBooth(){
    console.log("clicked goToBooth");
    this.navCtrl.navigateForward('booth-product-list');
  }

Here are the app-routing.module.ts routes in question:

{
        path: 'booth-product-list',
        loadChildren: () => import('../booth-product-list/booth-product-list.module').then( m => m.BoothProductListPageModule)
      },
      {
        path: 'booth-detail-list',
        loadChildren: () => import('../booth-detail-list/booth-detail-list.module').then( m => m.BoothDetailListPageModule)
      }

But the new pages don't have the tab bar at the bottom as the url has changed. So I move the routes from app-routing.module.ts to tabs-routing.module.ts. I get the following error in the console:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'booth-product-list'

I am sure I am over looking something small but I just can not figure it out. Please help a nube if you can.

Upvotes: 0

Views: 819

Answers (1)

Aniruddh Thakor
Aniruddh Thakor

Reputation: 1616

if your want to route new page with tabs then you have to give navigation routing like

this.navCtrl.navigateForward('tabs/booth-product-list');

Upvotes: 1

Related Questions