How to trigger ionViewWillLeave in Ionic 4 with route in tabs.router.module

Question

Lifecycle hooks ionViewWillLeave / ionViewDidLeave are not triggered when placing all pages routes in TabsPageRoutingModule.

We changed the routes from app-routing.module.ts to tabs.router.module.ts to get full view of the tabbar in the Ionic 4 app. The routes works perfectly.
When the routes were in app-routing.module.ts, the ionViewWillLeave was always triggered when leaving the page (and closing the present Observables). Now the ionViewWillLeave is not triggered when leaving the page.

Route in tabs.router.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'chats',
        outlet: 'chats',
        component: ChatsPage
      },
...

Logging failed for ionViewWillLeave in TS file

ionViewWillEnter() {
  console.log('ionViewWillEnter');  // <- In console when entering
}
ionViewWillLeave() {
  console.log('ionViewWillLeave');  // <- Not in console when leaving
}

Can't figure out why the ionViewWillLeave is not printed anymore. Any help is appreciated.

Route in app-routing.module.ts

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'chats', loadChildren: './chats.module#ChatsPageModule' },
...

Logging success for ionViewWillLeave in TS file

ionViewWillEnter() {
  console.log('ionViewWillEnter');  // <- In console when entering
}
ionViewWillLeave() {
  console.log('ionViewWillLeave');  // <- In console when leaving
}

Is ionViewWillLeave / ionViewDidLeave are getting triggered? — Mitesh Shah, Sep 06 '19 at 08:38
@Jonathan my problem was solved when I applied the breaking changes for that particular build. Are you facing similar issues? — Tomas Vancoillie, Feb 12 '20 at 15:18

Tomas Vancoillie · Accepted Answer · 2019-03-29T09:44:47.020

Solution for our problem

Breaking changes to tabs
4.0.0-beta.18 (2018-12-13)

Stopped using outlet/component in tab-router, now we directly place children pages in the tabbed path.

{
  path: 'tabs',
  component: TabsPage,
  children: [
    {
      path: 'home',
      children: [
        {
          path: '',
          loadChildren: '../home/home.module#HomePageModule'
        },
        {
          path: 'chats'
          children: [
          {
            path: '',
            loadChildren: '../chats/chats.module#ChatsPageModule'
          }
        ]
      },
...

How to trigger ionViewWillLeave in Ionic 4 with route in tabs.router.module

1 Answers1