【ionic 4】ionic back button issue

i create a tabs which include three pages

tabs ----home ----menu ----contact

in home page i add a detail page

when click button on home page, can be push to detail page

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor(private router: Router) { 

  }
  pushTo(id){
    this.router.navigate(['/detail/'+id]);
  }
}

so when i click button on home page, it will go detail page, and then i click back button it go back to home page, everything looking good.

problem is if i click button again, detail page button is missing and have no page transition

on console there show “router-outlet destroyed”

here is my routing module

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

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'detail/:id', loadChildren: './detail/detail.module#DetailPageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

here is my tabs routing module

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';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        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 {}

here is detail.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>详情</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
{{post_data}}
</ion-content>

[gulullu]

The issue was fixed in last ionic 4 version 😄

‘router-outlet destroyed’ issue still existing on ‘4.0.0-beta.16’.

[paulstelzer]

Thanks for the issue! As @arihantdaga mentioned this should work in beta.17, so I close this here. If the issue occurs again, please open a new issue and describe what’s not working correct

UPDATE: The main issue was because of tabs. It’s correct that tabs are not working correctly with the back button, but with the next betas, we will have a refactor of the tabs (see #16619). So i close this here and please follow that issue