0

I've been trying to figure out how to stop mousemove event firing change detection in Angular. Some articles mentioned I can achieve this by adding a line in polyfills.ts:
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove'];

I've tried it in stackblitz and it perfectly works. BUT, the tricky part is that it doesn't not work at all if I create a Angular project in my local and do totally the same thing. It just keeps triggering change detection on mousemove event even though I add the line above in polyfills.ts.

What am I missing? Any insight would be appreciated!

DongBin Kim
  • 1,799
  • 5
  • 23
  • 43
  • please provide a reproduce repo, so I can try to debug. – jiali passion Oct 23 '19 at 08:26
  • @jialipassion https://github.com/binDongKim/try-zonejs this is the repo – DongBin Kim Oct 23 '19 at 08:44
  • 1
    I see, it seems to be an issue of Angular CLI with the newest zone.js, I will fix it and update the solution here, for now you need to 1. update `polyfills.ts` ``` import './zone-flag'; import 'zone.js/dist/zone'; // Included with Angular CLI. ``` 2. create a new file called `zone-flag.ts` ``` (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove']; ``` Thanks! – jiali passion Oct 23 '19 at 15:11
  • It works like a charm! Thank you so much :D – DongBin Kim Oct 24 '19 at 02:32
  • @jialipassion One question: do I have to add `(window as any).__Zone_disable_requestAnimationFrame = true;` in `zone-flag.ts` too if I want to prevent zonejs from detecting requestAnimationFrame? – DongBin Kim Oct 24 '19 at 02:49
  • 2
    yes, please add all zone related flags in `zone-flag.ts`. – jiali passion Oct 25 '19 at 03:25

1 Answers1

4

Thanks to @jialipassion, managed to nail it.

  1. Create a new file, zone-flag.ts at the same level with polyfills.ts
  2. Add (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove']; in zone-flag.ts:
// in zone-flag.ts
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['mousemove'];
  1. Add import './zone-flag' in polyfills.ts:
// in polyfills.ts
import './zone-flag';
import 'zone.js/dist/zone'; // Included with Angular CLI.

Hope this help anyone who might navigate here.

DongBin Kim
  • 1,799
  • 5
  • 23
  • 43
  • 1
    What is unfortunate is that this simply disables the change detection in the heavy wrapper that is the zone.js monkey patcher, but it still causes huge performance issues since you're still 10 levels deep in the microTask dispatcher of zone.js. I wish we could just eliminate the patching of these events in totality, but it just doesn't seem to work. – krob Mar 03 '20 at 20:37