Ionic4, Angular router navigation to tabmenu subpages

Hello Ionic Community,

I’m currently migrating my ionic3 project to ionic4, with no prior knowledge of pure angular projects.
So naturally i have some problems with the new navigation.

After reading through the angular docs and some experimenting i got the hang of the routing and normal navigation. But i just can’t get navigation inside a tab-menu to work.

Creating a tab-menu and navigating between them works, but i don’t know how i can navigate deeper into a tab, while preserving the tab-menu and the ability to switch between tabs and have the view of a tab preserved.

Relevant Code:
app.routing.module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'tutorial', loadChildren: './pages/tutorial/tutorial.module#TutorialPageModule' }, 
  { path: '', redirectTo: 'tutorial', pathMatch: 'full' },
  { path: '', loadChildren: './pages/tabs-main/tabs-main.module#TabsMainPageModule' },
  { path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule' },
  { path: 'signup', loadChildren: './pages/auth/signup/signup.module#SignupPageModule' },
  { path: 'authReset', loadChildren: './pages/auth/auth-reset/auth-reset.module#AuthResetPageModule' },
  { path: 'contract/:id', loadChildren: './pages/contracts/contract-details/contract-details.module#ContractDetailsPageModule'},
  { path: '**', loadChildren: './pages/page-not-found/page-not-found.module#PageNotFoundPageModule'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    enableTracing: false,
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Ignore the other pages, tutorial, login stuff and redirecting to the tabs menu are working

tabs.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { TabsMainPage } from './tabs-main.page';
import { ContractPage } from '../contracts/contract/contract.page';
import { ContractPageModule } from '../contracts/contract/contract.module';
import { ContractDetailsPage } from '../contracts/contract-details/contract-details.page';
import { ContractDetailsPageModule } from '../contracts/contract-details/contract-details.module';
import { UserAreaPage } from '../user-area/user-area.page';
import { MorePage } from '../more/more.page';
import { UserAreaPageModule } from '../user-area/user-area.module';
import { MorePageModule } from '../more/more.module';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsMainPage,
    children: [
    {
      path: 'contracts',
      outlet: 'contracts',
      component: ContractPage,
      children: [
        {
          path: 'contracts/details/:id',
          outlet: 'contracts',
          component: ContractDetailsPage,
        }
      ]
    },
    {
      path: 'userarea',
      outlet: 'userarea',
      component: UserAreaPage,
    },
    {
      path: 'more',
      outlet: 'more',
      component: MorePage,
    }
    ]
  }, {
    path: '',
    redirectTo: '/tabs/(contracts:contracts)',
    pathMatch: 'full'
  }
];


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ContractPageModule,
    UserAreaPageModule,
    MorePageModule,
    ContractDetailsPageModule,
    RouterModule.forChild(routes)
  ],
  declarations: [TabsMainPage]
})
export class TabsMainPageModule { }

tabs template

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(contracts:contracts)">
    <ion-router-outlet name="contracts"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(userarea:userarea)">
    <ion-router-outlet name="userarea"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(more:more)">
    <ion-router-outlet name="more"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

In the contracts tab i only have a button to push to a detail page to test:

push():void{
    this.router.navigate(['details', '10'], {
      relativeTo: this.route,
    })
  }

This does not work however, it just somehow redirects to: /tabs.

the url for the contracts list looks like: /tabs/(contracts:contracts)
but how should the details page url look like?
i tried:
/tabs/(contracts:contracts)/details/id
/tabs/(contracts/details/id:contracts)
/tabs/(contracts:contracts/details/id)

but nothing worked.

Can somebody please enlighten me how deeper navigation inside of a tab-menu works? I’m at my wits end.

EDIT:----------------------------------
I managed to make it work by having the details page in the tab router as sibling to the other tabs.
new routerconfig in tabs.module:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsMainPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(contracts:contracts)',
        pathMatch: 'full'
      },
      {
        path: 'contracts',
        outlet: 'contracts',
        component: ContractPage,
      },
      {
        path: 'contracts/details/:id',
        outlet: 'contracts',
        component: ContractDetailsPage,
      },
      {
        path: 'userarea',
        outlet: 'userarea',
        component: UserAreaPage,
      },
      {
        path: 'more',
        outlet: 'more',
        component: MorePage,
      }
    ]
  },
   {
    path: '',
    redirectTo: '/tabs/(contracts:contracts)',
    pathMatch: 'full'
  }
];

That means that i would have to load all pages that i want to navigate to into the tabs.router.module as route-sibling of the tabs. And if i want to access a page from multiple tabs, i need to add page for every tab i want to access it from.

Is there no simpler way?