Ionic 4 start tabs project Lifecycle hooks broken

Question

Step1:

ionic start stacktabs tabs --type=angular
ionic cordova platform add android
ionic cordova run android --prod

Everything works.

Step 2: Check current routings:

//START: app-routing.module.ts:

   path: '',
   loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)

//END: app-routing.module.ts:

// START: tabs-routing.module.ts:

            const routes: Routes = [
            {
            path: 'tabs',
                component: TabsPage,
                children: [
                 {
                    path: 'tab1',
                    children: [
                  {
                    path: '',
                    loadChildren: () =>
                      import('../tab1/tab1.module').then(m => m.Tab1PageModule)
                  }
                ]
              },
              {
                path: 'tab2',
                children: [
                  {
                    path: '',
                    loadChildren: () =>
                      import('../tab2/tab2.module').then(m => m.Tab2PageModule)
                  }
                ]
              },
              {
                path: 'tab3',
                children: [
                  {
                    path: '',
                    loadChildren: () =>
                      import('../tab3/tab3.module').then(m => m.Tab3PageModule)
                  }
                ]
              },
              {
                path: '',
                redirectTo: '/tabs/tab1',
                pathMatch: 'full'
              }
            ]
          },
          {
            path: '',
            redirectTo: '/tabs/tab1',
            pathMatch: 'full'
          }
        ];  

// END: tabs-routing.module.ts:

Step: 3 Add console.log for constructor, ionViewWillEnter, ionViewDidEnter inside

tabs.page.ts
tab1.page.ts
tab2.page.ts

Re-run and everythings works as expected with the following console.log info:

            Inside tabs.page.ts constructor()....
            Inside tab1.page.ts constructor()....
            Inside tab1.page.ts ionViewWillEnter()....
            Inside tab1.page.ts ionViewDidEnter()....
            Inside tabs.page.ts ionViewWillEnter()....
            Inside tabs.page.ts ionViewDidEnter()....

Press tab2:
            Inside tab2.page.ts constructor()....
            Inside tab2.page.ts ionViewWillEnter()....
            Inside tab2.page.ts ionViewDidEnter()....

Press tab1:

    Inside tab1.page.ts ionViewWillEnter()....
    Inside tab1.page.ts ionViewDidEnter()....

Add a new page: initPage

ionic g page initPage

Check app-routing.module.ts

    const routes: Routes = [
      {
        path: '',
        loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
      },
      {
        path: 'init-page',
        loadChildren: () => import('./init-page/init-page.module').then( m => m.InitPagePageModule)
      }
    ];

Step 4: Add ion-button in tab1.page.html which will route to initPage:

<ion-button expand="full" (click)="gotoInitPage()">Go to InitPage</ion-button>

gotoInitPage()
{
this.navController.navigateForward('/init-page');
}

initPage shown up with no issues.

Step 5: Add ion-button in init-page.page.html which will route back to tabs page:

<ion-button expand="full" (click)="backToTabsPage()">Back to TabsPage</ion-button>

backToTabsPage()
{
this.navController.navigateForward('/tabs/tab1');
}

Note: The bottom tabs button and tab1 page shown up for the view but from the chrome debugger:

tab1 modules never fired up at all, ie Only the tabs.page.ts got executed:

Only show tabs page log

Inside tabs.page.ts ionViewWillEnter()....
Inside tabs.page.ts ionViewDidEnter()....

Tested again by adding a back button inside initPage: The result is the same, tab1 page module not fired up.

<ion-header>
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
           <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
        </ion-buttons>
        <ion-title>InitPage</ion-title>
    </ion-toolbar>
</ion-header>

I tried with different method on routing inside initPage with no luck:

this.navController.navigateRoot('/tabs/tab1');
this.router.navigateByUrl('/tabs/tab1');

Envirnoment:

        Ionic CLI                     : 5.4.16 
        Ionic Framework               : @ionic/angular 5.0.4
        @angular-devkit/build-angular : 0.803.25
        @angular-devkit/schematics    : 8.3.25
        @angular/cli                  : 8.3.25
        @ionic/angular-toolkit        : 2.2.0

        Cordova:
        Cordova CLI       : 9.0.0 ([email protected])
        Cordova Platforms : android 8.1.0
        Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

        Utility:
        cordova-res : 0.8.1
        native-run  : 0.3.0

        System:
        Android SDK Tools : 26.1.1 (C:\Users\louie\AppData\Local\Android\Sdk)
        NodeJS            : v12.14.0 (D:\Program Files\nodejs\node.exe)
        npm               : 6.13.4
        OS                : Windows 10

Please help...thanks in advance

Answer 1

Just for someone having the same problem. It turns out that you need to use this.navController.navigateRoot('/some-route') inside the tab1 page. And inside the initPage you need to issue the same, ie this.navController.navigateRoot('/tabs/tab1'); Credit to this URL: https://www.joshmorony.com/using-angular-routing-with-ionic-4/