Trouble navigating Tab child pages with Angular Router in Ionic 4

Ionic Framework
1

I am using a tabbed screen layout where the tab module has its own routes to host the tab pages and their children pages too. Here is the routes object (i.e in the tabs.router.module.ts) :

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'home',
                children: [
                    {
                        path: '',
                        loadChildren: '../pages/home/home.module#HomePageModule'
                    }
                ]
            },
            {
                path: 'deliverablesIndex',
                children: [
                    {
                        path: '',
                        loadChildren: '../pages/deliverables-index/deliverables-index.module#DeliverablesIndexPageModule'
                    },
                    {
                        path: 'create',
                        children: [
                            {
                                path: '',
                                loadChildren: '../pages/deliverable-create/deliverable-create.module#DeliverableCreatePageModule'
                            }
                        ]
                    }
                ]
            },
            {
                ...some more tabs
            },
            {
                path: '',
                redirectTo: 'tabs/home',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: 'tabs/home',
        pathMatch: 'full'
    }
];

This works great for navigating between the tabs, however when I try to navigate one page deeper in the deliverablesIndex to the create sub route, I get this error: Cannot match any routes. URL Segment: '/tabs/deliverablesIndex/create'

I am using this to navigate upon a button click:

 this.router.navigate(['/tabs/deliverablesIndex/create/']);

I’ve tried '/tabs/deliverablesIndex/create/' and 'tabs/deliverablesIndex/create/' to no avail.

It works however when I type the URL myself in the browser: http://localhost:8100/core/tabs/deliverablesIndex/create .

What am I missing here?

1 Like