Angular-oauth2-oidc: Silent refresh causes unnecessary change detect

[jonyeezs]

Describe the bug
When you have other parts of the application having iframes that are sending messages back to the parent window, silent refresh's event listener on message is causing angular to trigger its change detection.

Stackblitz example
I can help setup if someone could point me to a seed stackblitz

To Reproduce
Steps to reproduce the behavior:

1. Setup silent refresh
2. Add something triggering window message event
3. add a ngDoCheck to any component or directive with a console.log
4. watch it light up.

Expected behavior
Should not have unnecessary change detect due to using silent refresh

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version ^5.0.2

Additional context
I reckon this should fix it; but then again I'm not sure if there's any where else down the stream you'd need to run inside angular again.

this.ngZone.runOutsideAngular(() => {
    window.addEventListener('message', this.silentRefreshPostMessageEventListener);
});

[jonyeezs]

Have upgraded to "version": "10.0.3"

Still seeing this execute a detect change. I don't think it should be checking the DOM and updating any visuals when there's a message from a silent refresh.

Do you need more information to help proceed with this? I could try get a stackblitz reproduction if i can get a seed project.

[jeroenheijmans]

Your remarks make sense to me. All that's needed probably is for the maintainer to include the fix, or indicate that a PR for this is welcome. I know work on this library is typically done only every few months, and a couple at once then usually.

[jonyeezs]

May i put in a PR for this (it doesn't have a PR welcome label)

[jeroenheijmans]

I'm unsure tbh to make the final call, I'd rely on @manfredsteyer to make that call.

[zampage]

Any updates on this? @manfredsteyer @jeroenheijmans

This creates hundreds of change detections triggers per second...

[jeroenheijmans]

I have no updates apart from my earlier remarks.

Changes/releases/merges to the library have been a bit slow recently. Remember that it's open source, in this case also done in the spare personal time of people. So you may need to consider forking or swapping in another lib if you can't wait any longer.

[lnikolic]

Got the same issue. Could someone tell me where to place that this.ngZone.runOutsideAngular(() => {...}) piece of code? Thanks in advance! @jonyeezs @jeroenheijmans

[ghostlytalamaur]

I totally disabled zone patches for message event:
zone-patches.ts

(window as any).__Zone_ignore_on_properties = [
  {
    target: window,
    ignoreProperties: ['message'],
  },
];

(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['message'];

export { };

polyfills.ts

// ---=== Order is important here! ===---
import './zone-patches';
import 'zone.js/dist/zone'; // Included with Angular CLI.

[lnikolic]

@ghostlytalamaur That definitely worked, thanks a lot! I do get change detection cycles caused by some setInterval somwhere, but it's nothing compared to before your fix.

[kailo777]

@zampage

Do you use the Angular Development Plugin together with Redux Dev Tools? Then it could be a bug in the Angular Dev Tools see: Interferences with Redux DevTools extension github.com/rangle/angular-devtools/issues/825

[zampage]

@kailo777 I'm aware that the same problem exists in other tools like Redux Dev Tools. We use the NgxsReduxDevToolsPlugin for NGXS, where we also opened an issue https://github.com/ngxs/store/issues/1758

But the problem also exists if we remove the Redux Dev Tools. As the author of this issue already stated, this problem comes from message eventlistener not running outside of angular zone. And there are apparently multiple packages that rely on the message events, hence generating the same problem.