[Ionic 4] Tabs + Nested Routing (relative navigation) - doesn't work

Ionic Framework
1

It sounds so basic yet caused me already two days of troubleshooting: enabling relative navigation within a given tab (), eg. on the tabs screen (route):

Navigation (absolute URLs):

/app/tabs/(events:events) -> 
/app/tabs/(events:events/detail/123) -> 
/app/tabs/(events:events/detail/123/participants) ->
/app/tabs/(events:events/detail/123/participants/detail/456)

The goal is to list a number of events, drill down into an event (detail), see a list of people, then pick a participant (participant detail).

participants’ & participants/detail are not only used for events, those pages could be called from other locations, too, in the app, eg: event subscription pages, admin pages etc.

The requirements is simple:

The routing should happen relative, ie. being on the events/detail page the participants page should be called eg

this._navController.navigateForward(['participants'], true, { relativeTo: this._activatedRoute });

Note, I deliberately chose an Array for the path the enforce router.navigate() vs router.navigateURL().

Subsequently, drilling down into the participant details, nav via:

this._navController.navigateForward(['details/456'], true, { relativeTo: this._activatedRoute });

So that the participants page gets pushed to the proper router outlet & allows for the Back Button to return to the previous page.

I can not use absolute URLs, such as:

this._navController.navigateForward('/app/tabs/(events:events/detail/123/participants/detail/4');

simply because at that level I could have been coming from a different place.

Does the above work? Yes and no. I works only for the first navigation / drill down, subsequent calls to _navController.navigateForward () are being silently ignored.

Any thoughts or ideas?
Alternative solutions to In-Tab-Nested-Page-Navigation including reusable pages?

Cheers,
Oliver

2

Here is a workaround that I’m using now.
Added the below to a 3rd level deep page called by an ‘outlet’-specific tab page to dynamically assemble the next level drill down (this could be in any of the tabs).

const outlet = this._activatedRoute.snapshot.outlet;
this._navController.navigateForward('/app/tabs/(${outlet}:vehicles/detail/123');