Routing / NavController not redirecting and not giving any error when route is invalid

Ionic Framework Ionic Angular
1

I am using Ionic 8, Angular 18 & Capacitor 6.

My app has a combination tabbed and non-tabbed pages, with a single ion-router-outlet in AppComponent.

My issue is in my tabbed page, let’s say http://localhost/tab-page1, when I try to do router.navigateByUrl(‘…/full-page’) or navController.navigateForward(‘…/full-page’) to a full non-tabbed pages, the page doesn’t redirect. There are no errors in the console. And I have verified that http://localhost/full-page works when visited directly.

However, it works when I try to go to a different tabbed page such as router.navigateByUrl(‘…/tab-page2’) or navController.navigateForward(‘…/tab-page2’).

And interestingly, if I purposely write some invalid routes in router.navigateByUrl() or navController.navigateForward(), the console is not showing any errors.

Any idea?

My high level routing setup:

export default [
    {
        path: '',
        component: TabLayoutComponent,
        children: [
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', loadChildren: () => import('../pages/home/home.routes') },
            { path: 'settings', loadChildren: () => import('../pages/settings/settings.routes') }
        ],
    },
    {
        path: 'full-page1',
        loadChildren: () => import('../pages/intro/intro.routes'),
    },
    {
        path: 'full-page2',
        loadChildren: () => import('../pages/products/products.routes'),
    },
] as Routes;
2

Could you be mixing standalone and NgModules?

3

No, apparently it is a silly mistake on my part.

I was doing this.navController.navigateForward(‘../tab-page2?param=data’).

Then it worked when I changed it to:

this.navController.navigateForward(['../tab-page2'], {
   relativeTo: this.route,
   queryParams: {
      param: 'data',
   },
});
1 Like