Ionic-framework: bug: Angular change detection is broken with 4.7

[danielsogl]

Bug Report

After upgrading to 4.7 I have to call this.changeDetector.detectChanges() to refresh the UI after for example extending arrays or load content from an property.

Ionic version:


[x] 4.7

Current behavior:

The Angular change detection is not working as expected.

Expected behavior:

The angular change detection should refresh the UI

Steps to reproduce:
Example function to load an array

public refreshNodes() {
    const setValue = (nodes: ContentNavigationNodeInterface[]) => {
      this.contactNodes = nodes;
      // Has to been called manually 
      this.changeDetector.detectChanges();
    };
    this.contentNavigationService.queryContactContentNavigation(setValue);
  }

<ion-content>
  <ion-list>
    <ion-item (click)="clickNode(node)" *ngFor="let node of nodes">
      <ion-label>
        <h2>{{ node.text }}</h2>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.3 (/Users/danielsogl/.nvm/versions/node/v12.4.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Capacitor:

   Capacitor CLI   : 1.1.1
   @capacitor/core : 1.1.1

Utility:

   cordova-res : 0.3.0 (update available: 0.6.0)
   native-run  : 0.2.8 

System:

   NodeJS : v12.4.0 (/Users/danielsogl/.nvm/versions/node/v12.4.0/bin/node)
   npm    : 6.10.1
   OS     : macOS Mojave

[manucorporat]

Can you provide a repo case? where is refreshNodes() being called?

[philmerrell]

If a repo case isn't provided soon, I can take the time to create one... How would you prefer it?

I first noticed this from my skeleton components that indicate content is loading. Something like this:

<ion-content>
  <ion-list *ngIf="subjects$ | async as subjects; else loading">
    <ion-item *ngFor="let subject of subjects" detail>
      <ion-label>
        {{ subject.Description }}
      </ion-label>
    </ion-item>
  </ion-list>
  <ng-template #loading>
    <subject-list-skeleton></subject-list-skeleton>
  </ng-template>
</ion-content>

If I refresh the page it works as expected. If if navigate to this page from another page, the skeleton components are never replaced by the actual content even though the data has resolved.

[danielsogl]

@philmerrell I chatted with @manucorporat and provided him my application to verify that kind of issue. He reproduced the issue as described.

I also have the same problem as you described. Navigating to a page directly is working as expected but navigating to another tab for example don't.

[manucorporat]

4.6.0 was based in a completely new runtime coming from Stencil One, much bigger change than you expect. 4.6.1, 4.6.2 and 4.7.0 comes with massive performance improvements, saving tons of unnecessary change detections. Given the nondeterministic nature of angular's zone, this is not easy to test.

[manucorporat]

Somehow in some cases the enteringView and the leavingView are the same leaving the enteringView disconnected from change detection. We already have a PR fixing this issue, coming a new release tomorrow

[tmk1991]

Shouldn't moving to stencil have been a major release for Ionic v5?

[manucorporat]

@tmk1991 not really, stencil is not a dependency of ionic. The change should be transparent for @ionic/angular

[brandyscarney]

A major release will only happen if there is a breaking change in the public API - component renamed/deprecated, properties renamed/deprecated, etc. Any breaking changes that were inadvertently done have been fixed with the goal to deprecate in v5.

[liamdebeasi]

Thanks for the issue! This has been fixed and is now available in Ionic 4.7.1.

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