Ionic-framework: bug: ion-nav does not fire change detection for the root page when using OnPush change detection

[ekrapfl]

Bug Report

Ionic version:
[x] 4.11.1 (also reproduced in sample in 5.1.1)

Current behavior:
I am presenting a modal using the ModalController. The modal presents a simple component that contains only an <ion-nav> with a root component set on it. This is so that I can create a sort of "guided process" within the modal using the <ion-nav> to navigate between pages of the process. The root page that I am setting on <ion-nav> uses OnPush change detection and contains some observable state that is shown in the UI asynchronously. If I set the modal component's ChangeDetectionStrategy to Default, everything works the way I expect with the component set as the root on the <ion-nav>. However, if I use ChangeDetectionStrategy.OnPush for the modal component, the root page will never display my asynchronous state changes. In fact, it will not even fire the regular angular lifecycle events like ngOnInit. It does fire the ionic lifecycle events, but the angular ones are never called.

Expected behavior:
I would expect that my modal component containing the <ion-nav> should be able to utilize whatever ChangeDetectionStrategy I choose, and as long as the child component can handle it (and mine can), it should fire angular lifecycle events and update the view accordingly.

Steps to reproduce:
I have put together a sample application that has a single button to launch a modal. That modal displays a page using ChangeDetectionStrategy.OnPush. The root component loaded in the <ion-nav> should show text initially, wait 3 seconds, and then update the text. It will actually never show the text at all with the current setup. Switching the ModalComponent to ChangeDetectionStrategy.Default will make it all work as expected.

Related code:
Sample app: https://github.com/ekrapfl/nav-on-push
There are comments in src/app/home/process.component.ts and src/app/home/modal-page.component.ts to indicate some of the things I have attempted/noticed.

Ionic info:

Ionic CLI                     : 5.4.16 (/Users/krapfl/.npm/_npx/19146/lib/node_modules/ionic)
Ionic Framework               : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.7
@angular-devkit/schematics    : 9.1.7
@angular/cli                  : 9.1.7
@ionic/angular-toolkit        : 2.2.0

[mhartington]

Hmm, ok so there's a few things here. It's not 100% due to Ionic, but it is something we should probably document.

Basically, the property binding for <ion-nav root=""> is set but the actual CD had been be pretty much turned off. What you need to do is call a private method from angular to do this.

import {
  Component,
  NgModule,
  ChangeDetectionStrategy,
  ɵmarkDirty as markDirty,
} from '@angular/core';
....

export class ProcessComponent {
  ModalPageComponent = ModalPageComponent;
  ionViewDidEnter(){
    markDirty(this)
  }
}

It might make sense to not use onPush here in the ProcessComponent since it needs to be able to handle this situation.

[ekrapfl]

That is actually what we ended up doing. It didn't seem like a terrible practice to do that for our situation, as there really is little to nothing in the process component, but we thought it was worth raising the issue in case you were not aware. I am fine with it if the answer is to just not use OnPush in that situation. Some documentation to that effect would definitely be nice, though.

Thanks Mike!

[liamdebeasi]

Thanks for the issue! I added some clarification to the docs via https://github.com/ionic-team/ionic-docs/pull/1448.

[ekrapfl]

Works for me. Thanks!

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