Angular 8: Disabling specific events from being checked on polyfills.ts isn't working

Question

I'm developing an application in angular 8 that uses jsPlumbToolkit to display and edit flowcharts. However i was experiencing performance issues, so i started digging and eventually realized that the change detection from zone.js was running at every mouse move event. So i tried adding the following line to pollyfills.ts, as shown in this article.

(window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove', 'pointermove'];

But that didn't seem to work, as every mouse event is still fired when i run chrome dev tools performace analysis.

Screenshot of the performance test, showing multiple events fired where i only waved the pointer around the screen

Any help would be greatly appreciated, as i'm currently running out of ideas.

Answer 1

Ok, i dug a little deeper and eventually came across this link:

Apparently, you need to create a new file with the above flag and import it into polyfills before you import zone.js. Hope this helps someone else.