Ionic-framework: [v4] Bug: ionViewWill/DidEnter not firing second time (similar to #12805)

[clarako]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/Users/clarako/.npm-global/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.8.6
   @angular-devkit/schematics    : 0.8.6
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.0.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 7 other plugins)

System:

   ios-deploy : 1.9.2
   NodeJS     : v8.12.0 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Describe the Bug
Neither ionViewWillEnter or ionViewDidEnter is being called when returning to a page the second time
using router.navigate or router.navigateByUrl.

Steps to Reproduce
Steps to reproduce the behavior:

1. Start with clean Ionic4 tabs starter template
   ionic start myApp tabs
   (yes to Ionic4 Beta)

1. For each of the 3 tabs (home,about,contact) write ionViewWillEnter and ionViewDidEnter to console
   Example:

import { Component, OnInit } from '@angular/core'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
  constructor() {
    console.log('HomePage')
  }

  ngOnInit() {
    console.log('HomePage: ngOnInit')
  }

  ionViewWillEnter(){
    console.log('HomePage: ionViewWillEnter')
  }

  ionViewDidEnter(){
    console.log('HomePage: ionViewDidEnter')
  }

}

1. ionic serve (watch console log)
2. Notice when clicking to a tab the 2nd time does not call ionViewWill/DidEnter
3. Same problem with backend routing using
   router.navigate or router navigateByUrl
   (ionViewWill/DidEnter is not called if it is not the first time the page is loaded)

Related Code
If you are able to illustrate the bug with an example, please provide a sample application via an online code collaborator such as StackBlitz, or GitHub.

Expected Behavior
I expect to be able to get ionViewWill/DidEnter every time a tab is clicked and when using router.navigate/navigateByUrl

Additional Context
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[Chethannp]

none of the life cycles events are triggering the second time you visit the tabs/other pages

[clarako]

@Chethannp are you saying that this is a bug?

[hiepxanh]

why dont you use angular life cycle?

[amitairos]

@hiepxanh What life cycle event in Angular is like ionViewWill/Did Enter?

[clarako]

looked up Angular lifecycles: https://angular.io/guide/lifecycle-hooks
The only one I'm familiar with is ngOnInit().)
But it doesn't trigger either when clicking on a tab the second time.

[paulstelzer]

I wrote an article on Medium about this topic -> https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864

At the moment (beta.15) ion-tabs stay in the stack, so after initialize a tab page, it will keep online and will not be destroyed if you switch between tabs. Maybe the ionic team changes this behaviour in future (they redesigned tabs in beta.15, so removing a tab after switching will be maybe added later).

So at the moment, you are right switching back to an tab you opened previous, will not trigger any lifecycle hooks. For me it's not a bug (because the components aren't destroyed or will be entered because they are still alive all time). For me adding such a behaviour would be a nice feature like @angular/material did at their tabs.

[olivermuc]

I also would consider this a bug, as ionViewWill/Did Enter is an ionic feature to catch the moment a page, modal, popup, or tab etc entered (repeatedly regardless of component lifecycle).
As opposed to the angular lifecycle event such as ngOnInit which really only is triggered once when the component is created.
Both events make sense and have their purpose.

I need to know when someone switches from tab to tab so ionViewWill/Did Enter is required to fire each time.

Example: On tapping a tab I would like to reset the individual tab's badge to 0;

Workaround:

 this._router.events.pipe(
      filter(event => event instanceof NavigationStart)
    ).subscribe((route: NavigationStart) => {
        // do something with   route.url    
    });

_EDIT: added example_
_EDIT2: added workaround_

[clarako]

Thanks @olivermuc for providing the workaround.

I tried to use it but ran into something. Sorry for the basic question.

import { Component, OnInit } from '@angular/core'
import { Router, NavigationStart } from '@angular/router'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
  constructor(private router: Router) {
    console.log('HomePage')
    this.router.events.pipe(
          filter(event => event instanceof NavigationStart)
        ).subscribe((route: NavigationStart) => {
            console.log('Route: '+route.url)
        })
  }

  ngOnInit() {
    console.log('HomePage: ngOnInit')
  }

  ionViewDidLoad() {
    console.log('HomePage: ionViewDidLoad')
  }

  ionViewWillEnter(){
    console.log('HomePage: ionViewWillEnter')
  }

  ionViewDidEnter(){
    console.log('HomePage: ionViewDidEnter')
  }

}

I get this error:
[ng] ERROR in src/app/home/home.page.ts(13,11): error TS2552: Cannot find name 'filter'. Did you mean 'File'?

[paulstelzer]

@clarako You have to add filter to your imports. Filter is from rxjs/operators (see https://www.learnrxjs.io/operators/filtering/filter.html )

[clarako]

@paulstelzer thanks for the tip, I added
import { filter } from 'rxjs/operators'
to home.page.ts and it works.

Hurray for the workaround!
But I agree with @olivermuc, clicking a tab should trigger Ionic life cycle events.

[amitairos]

Any updates on this?

[hiepxanh]

@amitairos I think it is not a bug. it just an uncompleted feature, and they are working on it. Right now we can make an work around like this and it will look like ionViewEnter()

```.ts
constructor() {
this.onViewEnter();
}

onViewEnter() {
this.router.events
.pipe(
filter(event => event instanceof NavigationEnd),
filter((event:NavigationEnd) => event.urlAfterRedirects == '/main/tabs/(messengers:messengers)')
)
.subscribe(p => {
// console.log('events',p);
this.getDataAndSetup();
})
}
```

[amitairos]

@hiepxanh I see. Thanks. I'm looking for a sort of onResume in Android - where each time the screen comes back to view, do something. Your workaround, if I understand correctly, works only when changing routes, not when coming back to the app. Am I correct?

[hiepxanh]

yes it is. I have some issue with on device resume too.

[RaulGM3]

Actually, this bug happens when changing from tab to tab, or at least in my case.

When you navigate through different pages in the same tab, the lifecycle works as expected.

Has anyone find a solution about this topic?

[paulstelzer]

Actually, this bug happens when changing from tab to tab, or at least in my case.

When you navigate through different pages in the same tab, the lifecycle works as expected.

Has anyone find a solution about this topic?

Please read my post about it -> https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864 or see #14566

[olivermuc]

All these issues may somehow be connected, but here it's less about lazy loading, than about missing events. ion-view-enter, as the name suggests, ought to be triggered whenever the view is entered/shown, regardless of whether it's the first time loaded or has been sitting on the stack.

[paulstelzer]

I think the issue with tabs is known, the other things I had described in the medium.com post. If something is unclear, please open a new issue

[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.