Navigation & cache issue with tab & navpush

[kashyap]

Hi
I am having issue with cache & navigation, please look at screens.its simple tab app.

steps to generate issue.
initially its load home page.
then click on page1 link(used [navPush]=“page1” to navigate)
then click to contact tab
then click to home tab → its shows page1(which is cached) and another point here any of the lifecycle events are not excuting
then if you click home tab again it will work.

How to avoid this cache issue?

 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

I have made below changes in cutePuppyPics template

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");
	 }

}

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

some of the unsolved similar issue

How to disable view caching in Ionic 2?

Thank you so much for your reply @lukasrein97 . i will do this way and reply.

How to disable cache for a single ion-content or component?

I have a page that shows item details, and can be pushed infinitely to keep looking at new data. I need to disable the cache for this view so that it will not keep storing listeners and html for potentially a large amount of nav pushes through history. Is there a view-cache=“false” equivalent in Ionic 2 that will prevent the component from being cached? Thanks for any help!

Is it possible to disable page caching in Ionic 2?

I’m working on a tab based app and it gets slow and slow after loading other tabs / pages. Is it possible to disable page cache? Thank you.

How to completely and absolutely disable internal ionic caching?

I have been pulling my hairs because of internal ionic caching. You delete an element from the page html, but it still exists there. Old error messages suddenly start appearing even if the whole code has been replaced. Do anyone of you face this issue ? Is there any solution for this.

[rapropos]

@kashyap

any of the lifecycle events

Can you be more specific here?

[kashyap]

when i click on home tab it must be open home page not that cached page(page1 here)

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”);}

[VibeThemes]

You need to pop everything from nav controller. So when you’re going to home page, use “popToRoot” instead of “pop”

[kashyap]

thanks , i have tried pop & poptoroot at different pages & at different lifecycle event.
but as i have explained above at step 4 none of lifecycle events are fired so how you going to put any code.its comes from cache so we must need to disable cache option or something like that.