Several issues about Ionic with zone

Who am I

  • Name: Jia Li
  • Company: Sylabs.io
  • Zone.js: Maintainer
  • Angular: Trusted Collaborator
  • @JiaLiPassion

Ionic change detection triggered more frequently after zone.js 0.9.1

Web Component

  • Ionic4 use Stencil, so everything is web component
  • zone.js 0.9.0 begin to patch CustomElements v1

Angular Elements

Web Page

Web Component 

  • connectedCallback
  • atrributeChangedCallback
  • ...

Angular

Component

ngZone

Ionic

Angular App (ngZone)

Ionic Component

Solution

// zone-flag.ts
(window as any).__Zone_disable_customElements = true;

// polyfills.ts

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import './zone-flag';
import 'zone.js/dist/zone'; // Included with Angular CLI.

Issue2: CD not run...

 removeItem() {
    this.alertController
      .create({
        header: 'Delete?',
        message: 'Do you want to delete the last item ?',
        buttons: [
          {
            text: 'Yes',
            handler: () => {
              setTimeout(() => {
                this.itemlist.splice(this.itemlist.length - 1, 1);
                this.itemlist = [...this.itemlist];
              }, 500);
            }
          },
          {
            text: 'Cancel',
            role: 'cancel'
          }
        ]
      })
      .then(alert => {
        alert.present();
      });
  }

Ionic

Angular App (ngZone)

Ionic Component

Stencil (global eventListener)

Made with Slides.com