[1.1.5] HTML5 mode causes the dreaded "10 $digest iterations reached" error

[jrabbe]

I do see that there are several issues on the 1.1.5 URL routing, but this specific issue doesn't seem to have been reported.

We are using a setup combining Require.js and angular together. After I turned on minification a problem that we had been seeing occasionally suddenly started occurring always. As I was removing template code it eventually went away after I removed the last trace of angular in the code. Just adding back a simply ng-include element would cause the problem to re-appear.

It might be that the require.js connection is a red herring, because I discovered that removing $locationProvider.html5Mode(true); from our app caused the problem to come back. We can probably survive without html5mode, but it would be much much better to have it.

Logs: (don't worry, jonas.radius.com is just a localhost alias, not public)

   * Error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 9; oldVal: 8"],["fn: $locationWatch; newVal: 10; oldVal: 9"],["fn: $locationWatch; newVal: 11; oldVal: 10"],["fn: $locationWatch; newVal: 12; oldVal: 11"],["fn: $locationWatch; newVal: 13; oldVal: 12"]]
 at Error (<anonymous>) at Object.Scope.$digest (http://jonas.radius.com:9000/assets/external/angular/1.1.5/angular.js:8840:19)
 at Object.Scope.$apply (http://jonas.radius.com:9000/assets/external/angular/1.1.5/angular.js:9012:24)
 at done (http://jonas.radius.com:9000/assets/external/angular/1.1.5/angular.js:10265:45)
 at completeRequest (http://jonas.radius.com:9000/assets/external/angular/1.1.5/angular.js:10449:7)
 at XMLHttpRequest.xhr.onreadystatechange (http://jonas.radius.com:9000/assets/external/angular/1.1.5/angular.js:10404:11)
      * angular.js:6349
      1. (anonymous function)
angular.js:6349
  1. (anonymous function)
angular.js:5420
    1. Scope.$apply
angular.js:9014
      1. done
angular.js:10265
  1. completeRequest
angular.js:10449
    1. xhr.onreadystatechange

[mattymess]

I'm also having the same issue with the ng-include directive. If I inline the content instead of using ng-include, the error goes away. What's weird that that I have many routes all using this main template that contains ng-include, but only one of the routes causes the error below.

Error: 10 $digest() iterations reached. Aborting!
17:32:10 log.1    | Watchers fired in the last 5 iterations: [["'assets/welcome/signed_out.html'; newVal: \"assets/welcome/signed_out.html\"; oldVal: undefined","fn: function (){ return element[0].scrollHeight; }; newVal: 68; oldVal: undefined","!isCollapsed; newVal: true; oldVal: undefined","fn: function () {\n        return $location.path()\n      }; newVal: \"/account/activity\"; oldVal: undefined","fn: $watchCollectionWatch; newVal: 1; oldVal: undefined"],["'assets/welcome/signed_out.html'; newVal: \"assets/welcome/signed_out.html\"; oldVal: undefined","fn: function (){ return element[0].scrollHeight; }; newVal: 68; oldVal: undefined","!isCollapsed; newVal: true; oldVal: undefined","fn: function () {\n        return $location.path()\n      }; newVal: \"/account/activity\"; oldVal: undefined","fn: $watchCollectionWatch; newVal: 1; oldVal: undefined"],["'assets/welcome/signed_out.html'; newVal: \"assets/welcome/signed_out.html\"; oldVal: undefined","fn: function (){ return element[0].scrollHeight; }; newVal: 68; oldVal: undefined","!isCollapsed; newVal: true; oldVal: undefined","fn: function () {\n        return $location.path()\n      }; newVal: \"/account/activity\"; oldVal: undefined","fn: $watchCollectionWatch; newVal: 1; oldVal: undefined"],["'assets/welcome/signed_out.html'; newVal: \"assets/welcome/signed_out.html\"; oldVal: undefined","fn: function (){ return element[0].scrollHeight; }; newVal: 68; oldVal: undefined","!isCollapsed; newVal: true; oldVal: undefined","fn: function () {\n        return $location.path()\n      }; newVal: \"/account/activity\"; oldVal: undefined","fn: $watchCollectionWatch; newVal: 1; oldVal: undefined"],["'assets/welcome/signed_out.html'; newVal: \"assets/welcome/signed_out.html\"; oldVal: undefined","fn: function (){ return element[0].scrollHeight; }; newVal: 68; oldVal: undefined","!isCollapsed; newVal: true; oldVal: undefined","fn: function () {\n        return $location.path()\n      }; newVal: \"/account/activity\"; oldVal: undefined","fn: $watchCollectionWatch; newVal: 1; oldVal: undefined"]]
17:32:10 log.1    |     at Error (<anonymous>)
17:32:10 log.1    |     at Object.Scope.$digest (http://localhost:5000/assets/angular.js?body=1:8614:19)
17:32:10 log.1    |     at Object.Scope.$apply (http://localhost:5000/assets/angular.js?body=1:8786:24)
17:32:10 log.1    |     at done (http://localhost:5000/assets/angular.js?body=1:10019:20)
17:32:10 log.1    |     at completeRequest (http://localhost:5000/assets/angular.js?body=1:10195:7)
17:32:10 log.1    |     at XMLHttpRequest.xhr.onreadystatechange (http://localhost:5000/assets/angular.js?body=1:10159:11)

[feugy]

👍

[ravishtiwari]

Also getting this issue on IE 7/8/9 and compatibility modes, here, is Stackover flow link : http://stackoverflow.com/questions/19276261/script5022-10-digest-iterations-reached-aborting-and-redirecting-to-index
and I am getting following error

SCRIPT5022: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 7; oldVal: 6"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 8; oldVal: 7"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 9; oldVal: 8"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 10; oldVal: 9"],["fn: function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
}; newVal: 11; oldVal: 10"]]

[jrabbe]

@ravishtiwari This is fixed in 1.2, I applied the patch to our local version of 1.1.5, and we are serving that locally instead of using the CDN version.

The 1.2 commit that fixes it is dca2317

[ravishtiwari]

@jrabbe thanks for update, I'll try upping my version of Angular JS/patching my local Angular JS version, and see if this resolves problem for me.

[ravishtiwari]

@jrabbe I updated my version of Angular, and this seems to resolve this "10 $digest() iterations reached. Aborting!", however, it still seems to be triggering URL change, leading it to redirect to home page.

Let me explain my scenario here, so that others can suggest me if this is exactly related to this or not:
I have a page say : http://example.com/users/myCollection.html
On this page, I am loading my AngularJS App inside a Bootstrap Modal dialog, when user clicks some link, on page. Angular route of app loaded in Modal is : /mywork/find

After upping the version of Angular, now, Modal seems to loading the app for a second, then, redirect happens, and it goes to home page.

FYI, I am also using jQuery on the page that is used to launch the Angular App, is there any chance of conflict due to this?

[jrabbe]

@Ravish make sure you investigate your routes in details since that is what can redirect your app, especially if you have an .otherwise call. If you can see whether it shortly loads a different URL that could indicate that something is affecting the $location service which is the most like scenario. 

[btford]

I'm going to close this since I believe it has been fixed in 1.2.x. If anyone has a short, reproducible test case, feel free to open a new issue with it. Thanks!

[ravishtiwari]

@jrabbe @btford Thanks for the update, I've verified my app routes. Problem was with using html5Mode(true) in my routing. I've switched that off and it's now working fine. I think I need to find a better way to embed Angular app inside modal

[chaudhary]

I am getting this on the latest version of angularjs also when I use ng-include in my code

[ravishtiwari]

@chaudhary my experience so far with this error has been : it's caused by either route configuration, or if you have some js/mark up that is freaking out angular.compile, so, dig deeper ;)