search

shlomiassaf / ngrid

A angular grid for the enterprise
https://shlomiassaf.github.io/ngrid
MIT License
241 stars 41 forks source link

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

Open tsiegleauq opened 5 years ago

tsiegleauq commented 5 years ago

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.

tsiegleauq commented 5 years ago

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

nickbelling commented 5 years ago

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.

shlomiassaf commented 5 years ago

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...

nickbelling commented 5 years ago

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).

tsiegleauq commented 5 years ago

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

shlomiassaf commented 5 years ago

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

tsiegleauq commented 4 years ago

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