Ionic 4 / Angular 6 : Nested child routes in tabs

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 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.

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 {}