Change detection stopped working in Electron app when using zone.js 0.9.1

Question

I updated an Electron app that I sort of inherited recently from Angular 6 to Angular 8. Using zone.js 0.9.1 (update: root cause is bug in this version of zonejs - see my self-answer below)

Followed the upgrade guides, etc., got everything compiling and running peachy - until I started triggering actions that update models and notice that the view is not updating immediately. The behavior I noticed is that if I do something such as click a tab or open a dialog or click a button, the view does not update until I click something else.

I realized it was some kind of change detection or zone issue, but everything else was working normally. But for whatever reason the zone was not recognizing the model changes and so the view was not refreshed until another action like a click triggered it.

I have some experience dealing with updating views after making changes outside of Angular and so I experimented with wrapping several event handlers in the zone promise like so:

this.zone.run(() => ...do the stuff it was doing before... )

And it worked - after recompiling the app I now see the view update immediately on button click and dialog open, like it did back in Angular 6.

But then I found that lots of changes that I do not have my own handlers for are also not working, for example changing tabs inside of mat-tab-group and default dialog buttons.

So this is turning into a rabbit hole - I could probably implement custom event handlers for every single tab click and button click, but that seems like a huge and unnecessary pain in the ass especially considering that I made no changes to the app logic itself, just the upgrade to Angular 8. It is possible I am forgetting something or have a weird/special case because it is an electron app (I didn't run into these problems when recently converting a web app from angular 6 to 8 using the same process).

I'm stumped. Hoping the community can point out my problem and solution - if all else fails I guess I'll just write a ton of custom handlers and wrap every line of code in this.zone.run(()=>...) - thanks!

Answer 1

Because I had already been fixing numerous issues related to the Angular 2-version jump, I had overlooked a console error ("Cannot read property 'eventNames' of undefined") which I at first thought was unrelated, but, duh, noticed zone.js in the stack.

Did some more research and found that this was a known issue with zone.js version 0.9.1 and Electron (See https://github.com/angular/angular/issues/31626)

I was only on that version because of a parallel project (non Electron) which was working fine and was on 0.9.1 so I felt like keeping them in sync for some reason, but after updating to 0.10.2 the eventNames error went away, and change detection works normally. It was all due to some stub function that returned undefined instead of the object with eventNames.

Thanks for reading; updating to latest worked, and fortunately the issue was fixed just a couple weeks ago.