Ionic 4 / Angular 6 : Nested child routes in tabs

This all seemed extremely confusing to me. Then i realised that all i had to do in Tabs Routing was.

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '',
    component: TabsPage,
    children: [
      { path: 'tab1', loadChildren: '../tab1/tab1.module#tab1Module'},
      { path: 'tab2', 
        children: [
          { path: '', loadChildren: '../tab2/tab2.module#tab2Module'},
          { path: ':ID', loadChildren: '../tab2/tab2details.module#tab2detailsModule'},
        ]
      },
    ]
  },
];

Where Tab2 has a List Page and a details page.

List Page URL : /tabs/tab2

Details Page URL : /tabs/tab2/123/

The Tab2 Tab stays active when your on the list or details page, and the back button shows up when your on the details page.

With 4.0.0-beta.18 ion-tab was removed and it's not necessary to use named outlets.

Demo (with two different approaches) + Explanation:
https://github.com/servrox/demo-ionic-tab-routing

Ionic CLI version 4.10.3
Ionic Framework @ionic/angular 4.0.1

This is how I did. In tabs.router.module.ts,

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'featured',
        children: [
          {
            path: '',
            loadChildren: '../tab-featured/tab-featured.module#TabFeaturedPageModule'
          }
        ]
      },
      {
        path: 'featured/:id',
        children: [
          {
            path: '',
            loadChildren: '../tab-featured-detail/tab-featured-detail.module#TabFeaturedDetailPageModule'
          }
        ]
      },
      {
        path: 'categories',
        children: [
          {
            path: '',
            loadChildren: '../tab-category/tab-category.module#TabCategoryPageModule'
          }
        ]
      },
      {
        path: 'popular',
        children: [
          {
            path: '',
            loadChildren: '../tab-popular/tab-popular.module#TabPopularPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/featured',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/featured',
    pathMatch: 'full'
  }
];

tab-featured-detail.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabFeaturedDetailPage } from './tab-featured-detail.page';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: TabFeaturedDetailPage }])
  ],
  declarations: [TabFeaturedDetailPage]
})
export class TabFeaturedDetailPageModule {}