Ionic 4 - Detail Page Drops the Tab Bar

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 {

}```

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

You have to route the page in your tabs-routing.module. When you route it the normal way, it does not show the tabs bar

How much for you to show me how to do it? I hope that didn’t come across as rude. It’s frustrating being this close, and yet so far away.

Have you found a solution for this? I’m so frustrated too and not finding a solution anywhere… :’(

1 Like

Yes, although I will say that I got help.