Ionic 4 beta sidemenu with tabs and tab detail pages routing

Ionic Framework ionic-v3
1

First off I apologize for the long winded topic tile, I had to do this because it is all interrelated. Anyway, here is my problem. My client would like to have side menu application that will have pages that will contain tabs. The tabs will then have detail pages connected to them. I have everything almost worked out except that when I click on something in one of the tabs (like a list item), it will open up my detail page but the back button will not be present. Is this something anyone else has experienced and if so how was it corrected. Code is below.

app-routing.module.ts

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

const routes: Routes = [
  {
    path: '',
    loadChildren: './tabs/tabs.module#TabsPageModule'
  },
  {
    path: 'list',
    loadChildren: './list/list.module#ListPageModule'
  },
  // { path: 'event-details', loadChildren: './event-details/event-details.module#EventDetailsPageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let event of events" href="tabs/(home:event-details/{{event.id}})" detail="true">
      <ion-label>{{event.name}}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

event-details.page.html

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button></ion-back-button>
  </ion-buttons>
  <ion-title>Back Button</ion-title>
</ion-toolbar>

<ion-content>
  <ion-card>
    <ion-card-content>
      <ion-card-title>{{event.name}}</ion-card-title>

      <p>{{event.location}}, {{event.country}}</p>
      <ion-text>{{event.time}}</ion-text>
    </ion-card-content>
  </ion-card>
</ion-content>

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 { EventDetailsPage } from '../event-details/event-details.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      // {
      //   path: '',
      //   redirectTo: '/tabs/(home:home)',
      //   pathMatch: 'full',
      // },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'event-details/:id',
        outlet: 'home',
        component: EventDetailsPage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule { }