KeyValueDiffers infinite loop when properties order change

[ghetolay]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request

Current behavior
When you change an object by a new object with properties on a different order an infinite loop may occur.

Expected behavior
Nobody wants an infinite loop :)

Minimal reproduction of the problem with instructions
You can easily see it using ngStyle an swapping between :

{
  width: '10px',
  height: '20px'
};

and

{
  height: '30px',
  width: '20px'
};

Here is a plunker doing just that : https://plnkr.co/edit/nRYa2aNydsKOYS8eaDEq

This is affecting both 2.4.9 and 4.0.0-rc.2 (you can easily swap version on the plunker inside config.js).

I'll reference that previous issue #9115 which is different but still about KeyValueDiffers and properties order.

[ghetolay]

I've just look at the DefaultKeyValueDiffer code and it's scary :).
I'm assuming this is because it handles deep mutable object. This made me think, Angular don't want to force users to use immutable data and this is fine but this adds complexity when it comes to handle things like differs (ngFor, ngStyle, ngClass...).

Would not it be worth it to have multiple implementation for immutable and mutable data so those using immutable data (cause of OnPush, NgRx etc...) could benefit from lightweight implementation ?

I'm saying all that because I'm assuming DefaultKeyValueDiffer is so complex because of mutable data so I hope I'm not wrong here.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}