Ionic-framework: Navigation & cache issue with tab & navpush

[kashyapgajiwala]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I have made below changes in cutePuppyPics template
event flow
1)Home ==>2)Page1==>3)Contact(Tab)==>4)Home(Tab)==>5)Home(Tab)

on 4th step none of the life cycle event codes executing.
on 5th step its shows correct view which should appear on 4th step
I have tried to use pop at different pages & lifecycle function but can't fix this cache issue

Expected behavior:
when i click on home tab it must view home tab not page1

Steps to reproduce:
1)Home ==>2)Page1==>3)Contact(Tab)==>4)Home(Tab)==>5)Home(Tab)

Related code:
home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <button ion-button full [navPush]="page1">page1</button>
  <button ion-button full [navPush]="page2">page2</button>
  <button ion-button full [navPush]="page3">page3</button>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
</ion-content>

home.ts
`import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Page1Page } from '../page1/page1';
import { Page2Page } from '../page2/page2';
import { Page3Page } from '../page3/page3';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
page1 = Page1Page;
page2 = Page2Page;
page3 = Page3Page;

constructor(public navCtrl: NavController) {
console.log("construct 0 home");
}
ngOnInit() { console.log("ngOnInit 0 home"); }
ionViewWillEnter() { console.log("ionViewWillEnter 1 home"); }
ionViewDidEnter() { console.log("ionViewDidEnter 2 home"); }
ionViewWillLeave() { console.log("ionViewWillLeave l1 home"); }
ionViewDidLeave() { console.log("ionViewDidLeave l2 home"); }
ionViewWillUnload() { console.log("ionViewWillUnload l3 home"); }
ionViewCanEnter() { console.log("ionViewCanEnter 3 home"); }
ionViewCanLeave() { console.log("ionViewCanLeave l4 home"); }

ionViewDidLoad() {
console.log("ionViewDidLoad 4 home");
}

}`
Other information:
https://forum.ionicframework.com/t/navigation-cache-issue-with-tab-navpush/99173

 ionic info

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.4.2

System:

    Node       : v6.11.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 6.0.0
    npm        : 3.10.10

[jgw96]

Hello, thanks for opening an issue with us. Would you mind posting a repo we could use to reproduce this issue?

[kashyapgajiwala]

its for all app with tab, even if you in conference app.

event flow 1)Schedule(Tab) > 2) Click on any session(Meet and greet) 3)About(Tab) 4)Schedule (Tab)

in 4 th step it will show you session view of 2nd step, it should show list of session or you must need to provide option to cache the view or not.

https://github.com/ionic-team/ionic-conference-app

https://github.com/kashyapgajiwala/MyIonic2App.git

you can check this scenario in any ionic2/3 app with tab. just put a link of page which is not in tab and you can see this issue.

[kashyapgajiwala]

Hi
Can anyone please check this issue or just inform me if anyone looking at it?

This scenario can be generated in any app with tab.
even id in your conference app as explained, though it doesn't look odd in conference app but
you can imagine scenario where you have 10 different page links on home page & each has 3-5 sub pages and if in that case cache page appear ,it will look odd.
and main issue here you can't detect that cached view from any where, no lifecycle event was fired.

[StevenLiSiwei]

This is exactly issue what I am facing with tabs, ionViewCanLeave works on Back Button, but not for tabs.

[kashyapgajiwala]

Hi

can I get confirmation on this issue whether anyone is looking into it or nor?

or should i need to move back to ionic1, this is serious issue for ionic2/3 all, i don't think it is just my issue ?

[jgw96]

Hello @kashyapgajiwala , sorry for the delay on this. Ive looked through this issue and have done some testing and the behavior you are describing is actually the intended behavior. Our nav system (and tabs) work like this because that is how native apps handle tabbed navigation. It will always keep the state of the users last navigation on that tab. A good test of this is the youtube app on android or the app store on iOS. For your use case it sounds like a sidemenu would fit your navigation better and also allow you to control when the root page is shown easier. Thanks for using Ionic!

[kashyapgajiwala]

Hi Thanks for reply.
I am already using sidemenu but still it gets cached. don't you thing cache should be optional like ionic1?
because it could be problem for all who want to use tab? and it looks really odd when you have 3-4 subpages in each tab ,in conferance app its look ok,doesn't seems to be a issue but if you have 30-40 total pages in app in that case you can't put everything on sidemenu.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.