Ionic 4 Angular: first Tab of tabbed page doesn't get the parameter via ActivatedRoute

Ionic Framework
1

Hi there,
I am using a tabbed page where I send an object via NavigationExtras. this works just fine.
And from there, I want to send the horseId to the tabs.
The HTML of the root tab page (horse-detail):

<ion-content>
  <ion-tabs>

    <ion-tab-bar slot="bottom" color="primary">
      <ion-tab-button tab="horse-size/{{horseId}}">
        <ion-label>Größen</ion-label>
      </ion-tab-button>
  
      <ion-tab-button tab="horse-food/{{horseId}}">
        <ion-label>Futter</ion-label>
      </ion-tab-button>
  
      <ion-tab-button tab="horse-health/{{horseId}}">
        <ion-label>Gesundheit</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  
  </ion-tabs>
</ion-content>

My routes in router module of the tab root page (horse-detail):

const routes: Routes = [
  {
    path: 'horse-detail',
    component: HorseDetailPage,
    children: [
      {
        path: 'horse-size',
        children: [
          {
            path: '',
            loadChildren: '../horse-size/horse-size.module#HorseSizePageModule'
          }
        ]
      },
      {
        path: 'horse-size/:horseId',
        children: [
          {
            path: '',
            loadChildren: '../horse-size/horse-size.module#HorseSizePageModule'
          }
        ]
      },
      {
        path: 'horse-food',
        children: [
          {
            path: '',
            loadChildren: '../horse-food/horse-food.module#HorseFoodPageModule'
          }
        ]
      },
      {
        path: 'horse-food/:horseId',
        children: [
          {
            path: '',
            loadChildren: '../horse-food/horse-food.module#HorseFoodPageModule'
          }
        ]
      },
      {
        path: 'horse-health',
        children: [
          {
            path: '',
            loadChildren: '../horse-health/horse-health.module#HorseHealthPageModule'
          }
        ]
      },
      {
        path: 'horse-health/:horseId',
        children: [
          {
            path: '',
            loadChildren: '../horse-health/horse-health.module#HorseHealthPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/horse-detail/horse-size',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'horse-detail/horse-size',
    pathMatch: 'full'
  }
];

and in the first tab .ts:

this.horseId = this.route.snapshot.params.horseId;

error message:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'horse-detail/horse-size'
Error: Cannot match any routes. URL Segment: 'horse-detail/horse-size'
    at ApplyRedirects.noMatchError (router.js:3387)
    at CatchSubscriber.selector (router.js:3376)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)
defaultErrorLogger @ core.js:9110
handleError @ core.js:9162
next @ core.js:34915
schedulerFn @ core.js:31051
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:31013
(anonymous) @ core.js:34240
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:34127
onHandleError @ core.js:34237
handleError @ zone-evergreen.js:363
runGuarded @ zone-evergreen.js:137
api.microtaskDrainDone @ zone-evergreen.js:663
drainMicroTaskQueue @ zone-evergreen.js:566
invokeTask @ zone-evergreen.js:469
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629

The second and third tab are recieving the id correctly via the activated Route. But not the first one.
am I missing something or is this a bug? :confused:

EDIT:
the browser also shows this route:
/horse-detail/horse-detail/horse-food/horse.id

Is it correct, that horse-detail shows up twice?

2

It seems like there is a timing problem.
I am recieving the parameter from the Activated route in the constructor of the page and for testing in the ngOnInit() function.
both of them seem to trigger before the data is even loaded.
If i click the first tab again after i navigated to the tab root page, the id is being shown in the routerlink and my console.log shows the right id…