Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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