Endless loop in Firefox using NGrid with ngx-translate structural directives

Question

Endless loop in Firefox using NGrid with ngx-translate structural directives

tsiegleauq opened this issue 5 years ago · comments

Apparently, Firefox is running into an endless loop if you are the translate directive from ngx-translate inside NGrid without setting the ChangeDetectionStrategy.OnPush

i.e, using translate will cause Firefox to run into an endless loop.

<div *pblNgridCellDef="'title'; row as user">
    <span translate>
        {{ user.title }}
    </span>
</div>

I tried to reproduce it with an own directive, but had no luck. Might be a issue here, in ngx-translate, or even firefox itself, since it's working just fine in chromium based browsers.

Sean · Answer 1 · Mon Jul 15 2019 17:48:29 GMT+0800 (China Standard Time)

From polyfills.js, the functions drainMicroTaskQueue() and Zone.wrap(callback, source) are called infinitely.

Nick Belling · Answer 2 · Tue Jul 23 2019 17:53:01 GMT+0800 (China Standard Time)

This was happening for me, but I'm not using any special cell definitions other than one which contains a <mat-icon>. Changing the detection strategy to OnPush solved it for me, if a bit inconvenient.

Shlomi Assaf · Answer 3 · Thu Jul 25 2019 18:04:03 GMT+0800 (China Standard Time)

strange, I'll try to investigate.

drainMicroTaskQueue() is doing the obvious, the issue is within the function(/s) that keep adding themselves to the next queue...

I would say it's most probably within the library, as angular is heavily tested.

The fact that it happens only in FF is super strange...

Nick Belling · Answer 4 · Thu Jul 25 2019 18:07:31 GMT+0800 (China Standard Time)

Wasn’t just Firefox in my case, happened in Edge too. I was only using Angular 7.1 though (and therefore alpha.23 of ngrid).

Sean · Answer 5 · Thu Jul 25 2019 18:34:01 GMT+0800 (China Standard Time)

I was observing this issue with Angular 7 running ngrid alpha 19, alpha 23; and Angular 8 running ngrid alpha 26

Shlomi Assaf · Answer 6 · Mon Aug 19 2019 07:28:43 GMT+0800 (China Standard Time)

Guys,

I was not able to reproduce this with angular 8.2.2 and ngrid@1.0.0-rc.0 using FireFox in OSX.

If someone can please upload an example to StackBlitz that I can reproduce in my machine, I would start working on it.

cc @tsiegleauq

Sean · Answer 7 · Fri Apr 03 2020 23:20:11 GMT+0800 (China Standard Time)

Apparently, this error was getting worse in nGrid 2 and Firefox ESR 68 and seems to be tied to ngx-translate (or perhaps other libraries that introduce DOM manipulating directives)

I have been able to reproduce it in Stackblitz in combination with ngx-translate.

In our project, it seemed like the infinite recursion with drainMicroTaskQueue() was only present when using translate as structural directive, but not so with using translate as pipe.
However, on Stackblitz is seems be enough to have nGrid and ngx-translate configured in the same module.
Opening this Stackblitz on Firefox ESR 68 freezes the browser to the point where Firefox offers to terminate the pages script execution.

https://stackblitz.com/edit/ngrid-ff-esr?file=src%2Fapp%2Fapp.component.html