Ionic 4 - Detail Page Drops the Tab Bar - ionic4

Question

In Ionic 4, I have an application that features a Master-Detail pattern on the Home Component. My tabs work for the highest-level (component) parents in the router tree.
However, my tabs disappear when I navigate to the Detail Page.
[An image of the detail page goes here.]
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
const routes: Routes = [
// { path: '', redirectTo: '/checklists', pathMatch: 'full' },
// { path: '', redirectTo: '/tabs', pathMatch: 'full' },
// { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'intro', loadChildren: './intro/intro.module#IntroPageModule' },
// Checklists are added to the tab bar here (or not)
{ path: 'checklists', loadChildren: './home/home.module#HomePageModule' }, // Tab Bar is Visible
// { path: 'checklists/:id', loadChildren: './checklist/checklist.module#ChecklistPageModule' }, // Tab Bar is Not Visible
{ path: 'checklists/:id',
children: [
{ path: '',
loadChildren: './checklist/checklist.module#ChecklistPageModule'
},
]
}, // Tab Bar is Not Visible
// Make checklists/:id into a NESTED route path? Nested, Auxiliary, and Child Routes
{ path: 'about', loadChildren: './about/about.module#AboutPageModule' },
{ path: 'contact', loadChildren: './contact/contact.module#ContactPageModule' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
tabs.router.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';
import { ChecklistPage } from '../checklist/checklist.page';
let tabsPath = 'tabs';
let tabsComponent = TabsPage;
let tabsEmptyPath = '';
let tabsRouteBasic = '/tabs/(home:home)';
// How do I turn the details of the About Tab into a variable?
// How does the router path/state get transported around in navigation parameters?
let aboutPath = 'about';
let aboutOutletName = 'about';
const routes: Routes = [
{
path: tabsPath,
component: tabsComponent,
children: [
{
path: tabsEmptyPath,
redirectTo: tabsRouteBasic,
pathMatch: 'full',
},
{
path: 'home',
outlet: 'home',
component: HomePage
},
{
path: 'checklist/:id', // This is temporary
outlet: 'home',
component: tabsComponent
},
{
path: 'checklist', // This is temporary
outlet: 'checklist',
component: ChecklistPage
},
// I would like to turn this path into a variable AND dynamically create its related component
{
path: aboutPath,
outlet: aboutOutletName,
component: AboutPage
},
// I would like to turn this path into a variable AND dynamically create its related component
{
path: 'contact',
outlet: 'contact',
component: ContactPage
}
]
},
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}