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)
ionic with zone.js
By jiali
ionic with zone.js
- 1,488