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)