[Ionic 4] Tabs href="/app/someList/:id/(schedule:schedule)"

Ionic Framework ionic-v3
1

Hi,
Has anyone successfully implemented a dynamic path as the Tabs parent url ?

For example
href="/app/someList/:itemTabsId/(schedule:schedule)"
By the way, the above href doesn’t work with two-way binding, so I had to change it to:

<ion-tab label="Members" icon="people" [routerLink]="['/someList/item.id/(members:members)']" routerLinkActive="active">
	<ion-router-outlet stack name="members"></ion-router-outlet>
</ion-tab>

When I use the routes as below:

{
	path: 'someList/:id',
	component: HivePage,
	children: [
		{
			path: '',
			redirectTo: '/someList/:id/(members:members)',
			pathMatch: 'full'
		},
		{
			path: 'members',
			component: HiveMembersPage,
			outlet: 'members',
		},
		{
			path: "events",
			outlet: "events",
			component: HiveEventsPage
		}
	]
}

I get the error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘someList/f3WQUgQfnIKnpjh2gAUH’
Error: Cannot match any routes. URL Segment: ‘someList/f3WQUgQfnIKnpjh2gAUH’

Even if I redirect to

children: [
		{
			path: '',
			redirectTo: '/(members:members)',
			pathMatch: 'full'
		},

Get the same error.

I believe the issue is that mapping to /someList/:id works, but if the dynamic path is required to direct the children to respective paths, it doesn’t work.

I’ve raised this as a bug on github also #16040, but no response. I did a workaround by using a static path and setting the selected id in my ngrx/entity, but now its making my do further workarounds in components+ngrx, and that’s getting complicated for no reason.

Any help would be highly appreciated.

2

Not a direct answer, but, with the last release v4-beta.15 the Ionic introduce a new rethinked way of handling tabs, maybe you could achieve your goal with this upgrade? Ionic v4-beta.15 is out - Rethinking Tabs

3

Thanks for the response. I got so excited that I went ahead and tested it.

The issue is not with the Tabs html template, it’s in the routing. The routing logic supported is:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

But I require:

const routes: Routes = [
  {
    path: 'list/:id',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/(home:home)',
    pathMatch: 'full'
  }
];
4

Never did that with tabs so can’t really answer sorry. I was just hoping that the new tabs would had help since you could now kind of specify a custom routing for each tabs or something. Good luck