How to Troubleshoot Angular "10 $digest() iterations reached" Error

Question

10 $digest() iterations reached. Aborting!

There is a lot of supporting text in the sense of "Watchers fired in the last 5 iterations: ", etc., but a lot of this text is Javascript code from various functions. Are there rules of thumb for diagnosing this problem? Is it a problem that can ALWAYS be mitigated, or are there applications complex enough that this issue should be treated as just a warning?

Answer 1

as Ven said, you are either returning different (not identical) objects on each $digest cycle, or you are altering the data too many times.

The fastest solution to figure out which part of your app is causing this behavior is:

1. remove all suspicious HTML - basically remove all your html from the template, and check if there are no warnings
2. if there are no warnings - add small parts of the html you removed and check if the problem is back
3. repeat step 2 until you get a warning - you will figure out which part of your html is responsible for the problem
4. investigate further - the part from step 3 is responsible for either mutating the objects on the $scope or is returning non-identical objects on each $digest cycle.
5. if you still have $digest iteration warnings after step 1, than you are probably doing something very suspicious. Repeat the same steps for parent template/scope/controller

You also want to make sure you are not altering the input of your custom filters

Keep in mind, that in JavaScript there are specific types of objects that don't behave like you would normally expect:

new Boolean(true) === new Boolean(true) // false new Date(0) == new Date(0) // false new String('a') == new String('a') // false new Number(1) == new Number(1) // false [] == [] // false new Array == new Array // false ({})==({}) // false