Directive with missing translation causes browser freeze

[Grolleau]

Current behavior

We are adding the Matomo web tracking solution on our project.

When a page contains a missing translation, the directive is called thousands of times until Firefox ask for killing the script. If we use the pipe instead of the directive, there is no problem.

I guess that problem is related to MutationObserver added on DOM, by Matomo, to track users actions.

Expected behavior

Missing translation with translate directive should not trigger infinite loop

How do you think that we should fix this?

Always set node.lastKey with key instead of setting it when translation is different from key. The guard clause of updateValue function should prevent infinite updates.

` updateValue(key: string, node: any, translations: any) { if (key) { if (node.lastKey === key && this.lastParams === this.currentParams) { return; }

  this.lastParams = this.currentParams;

  let onTranslation = (res: string) => {
    if (res !== key) {
      node.lastKey = key;
    }
    ...
  }

} `

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-acbh8j

Environment

ngx-translate version: 12.1.0
Angular version: 8.1.4

Browser:
- [ X] Chrome (desktop) version 87.0.4280.141
- [X ] Firefox version 84.0.1

For Tooling issues:
- Node version: v14.15.0
- Platform:  Windows            

[joscht]

We are having the same behaviour in combination with simplebar (https://github.com/Grsmto/simplebar). Probably simplebar adds some Observer/Listener to the DOM which in combination with ngx-translate leads to an infinite loop. Ist there a chance this pull request will be merged any time soon or the issue will be fixed in any other way?

[mario0511]

I have the same issue.

By using a single translate in a lazyloaded simplebar area, after 4th 5th load, the window freezes completely. Even if i close the tab, my systems stays under load. Have to restart the browser for the system to calm down.

Currently using: Angular 11.2.10 / Simplebar 2.3.4 / ngx-translate 13.0.0

EDIT: I found out that the window freeze occurs if a translation-key does not exist in the translation file. f.e. "parent.sub.translationKey"