Issue

We use a Angular cell component which contains a button. I noticed that sometimes (approximately 1 out of 10 times) the button event is handled outside of the zone which leads to issues.

What I've found out so far

agInit sometimes runs outside of the zone. I found that out by using the following snippet:

agInit(params: RendererParams): void { const inZone = NgZone.isInAngularZone(); console.log("AgInit in Zone?: " + inZone);
}

If agInit is not in the angular zone, the button callback is also not in the zone.

I also noticed that the callstack is slightly different in the case where agInit runs inside our outside the zone:

Here is a link to a full diff of both stack traces:

I also noticed that in the error case, the callstack start from Utils.debounce in agGrid.

To further investigate the issue, I forked the ngzone (see snippet below). No errors were logged.

ngDoBootstrap(applicationRef: ApplicationRef) { const debugSpec: ZoneSpec = { name: "debugSpec", onHandleError: (parentZoneDelegate: ZoneDelegate, currentZone: Zone, targetZone: Zone, error: any) => { console.log(error); return true; } }; Zone.current.fork(debugSpec).run(() => { applicationRef.bootstrap(AppComponent); });
}

Workaround

I can always manually run the callback within the zone. That works.

5

1 Answer

I found the the problem. Since it's hard to reproduce I am not 100% sure though. I think it is a AgGrid bug.

Why?

1. I noticed that if it is outside the zone its called by Utils.debounce
2. Then i check where ag grid calls it. In around 6 places. One of them was in a ResizeObserver callback
3. Angular zone monkeypatches setTimeout, but not ResizeObserver
4. I could toggle between ResizeObserver and and polyfill which relies on setTimeout by using suppressBrowserResizeObserverin the gridSettings
5. I wrote an automation to refresh the browser in an endless loop and stop when the error happens
6. I could always with max 10 refresh reproduce the error with ResizeObserver enabled
7. I could never reproduce the error using the polyfill

Will open an issue on github.

How i fixed the issue

I added the following import:

import '

5

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.