Infinite loop of $locationWatch

[JensRantil]

I sent an initial e-mail to the Google Groups mailing list here: https://groups.google.com/forum/?fromgroups#!searchin/angular/$24locationWatch/angular/Vihjqr04UUw/f3vIBtk9-IIJ I decided to create an issue to get this thing documented properly.

I have two AngularJS applications that individually functions correctly. One of them uses a $routeProvider to switch between views and the other does not. I just ran into a bug when having both applications on a single page; Switching from http://myurl.com/page.html#/one to http://myurl.com/page.html#/two triggers an infinite loop of $locationWatch calls. Initially loading the page works fine.

I am getting errors similar to #1417, but there are some differences:

• I am having this issue in Chromium, but many mention that that issue is an IE issue.
• I am not doing any history.pushStates. My location change is simply done by clicking on an <a href="#/two">link</a> tag.
• my digest cycle does never finish instead a new $digest cycle is initiated when the previous one has been aborted (it says "Aborting!" in the log over and over again). Here's an extract from my console log:

Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: "[[\"fn: $locationWatch; newVal: 8; oldVal: 7\"], [\"fn: $locationWatch; newVal: 9; oldVal: 8\"], [\"fn: $locationWatch; newVal: 10; oldVal: 9\"], [\"fn: $locationWatch; newVal: 11; oldVal: 10\"], [\"fn: $locationWatch; newVal: 12; oldVal: 11\"]]"
    at Error (<anonymous>)
    at Object.Scope.$digest (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:7925:19)
    at Object.Scope.$apply (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:8097:24)
    at http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:9420:36
    at completeOutstandingRequest (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:3001:10)
    at http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:3281:7 angular-1.0.6.js:5704
Uncaught Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: "[[\"fn: $locationWatch; newVal: 8; oldVal: 7\"], [\"fn: $locationWatch; newVal: 9; oldVal: 8\"], [\"fn: $locationWatch; newVal: 10; oldVal: 9\"], [\"fn: $locationWatch; newVal: 11; oldVal: 10\"], [\"fn: $locationWatch; newVal: 12; oldVal: 11\"]]" angular-1.0.6.js:7925
Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: "[[\"fn: $locationWatch; newVal: 19; oldVal: 18\"], [\"fn: $locationWatch; newVal: 20; oldVal: 19\"], [\"fn: $locationWatch; newVal: 21; oldVal: 20\"], [\"fn: $locationWatch; newVal: 22; oldVal: 21\"], [\"fn: $locationWatch; newVal: 23; oldVal: 22\"]]"
    at Error (<anonymous>)
    at Object.Scope.$digest (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:7925:19)
    at Object.Scope.$apply (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:8097:24)
    at http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:9420:36
    at completeOutstandingRequest (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:3001:10)
    at http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:3281:7 angular-1.0.6.js:5704
Uncaught Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: "[[\"fn: $locationWatch; newVal: 19; oldVal: 18\"], [\"fn: $locationWatch; newVal: 20; oldVal: 19\"], [\"fn: $locationWatch; newVal: 21; oldVal: 20\"], [\"fn: $locationWatch; newVal: 22; oldVal: 21\"], [\"fn: $locationWatch; newVal: 23; oldVal: 22\"]]" 

Some additional information:

• AngularJS version: 1.0.6.
• The other app does not use $route, $routeParams or $location directly. It does, however, use AngularUI, that uses $location. I've tried inactivating AngularUI, but am still getting getting the loop.
• I know there are reported bugs when doing things like this in html5 mode. I am not using html5 mode.
• Monkeypatching the $locationWatch to print to console, I notice that old value constantly is "http://myurl.com/page.html#/one" and new value constantly is "http://myurl.com/page.html#/two".
• I also notice that browser location bar is not changing while the loop is running.
• I am using Chromium 25.0.1364.160 Ubuntu 10.04.

I've tried recreating this issue, but have so far failed: http://plnkr.co/edit/YSAHIocwCePqg8ZZig11

[JensRantil]

@dbinit Proposed I'd try the workaround

angular.module('myApp', []).value('$anchorScroll', null);

mentioned here. It did not work. Instead, I am getting another exception:

TypeError: object is not a function
    at update (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:14123:11)
    at Object.Scope.$broadcast (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:8261:28)
    at http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:7417:26
    at wrappedCallback (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:6797:59)
    at wrappedCallback (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:6797:59)
    at http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:6834:26
    at Object.Scope.$eval (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:8011:28)
    at Object.Scope.$digest (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:7876:25)
    at Object.Scope.$apply (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:8097:24)
    at done (http://192.168.147.25:8082/js/angularjs/angular-1.0.6.js:9111:20) 

[JensRantil]

#1417 (comment) proposes that adding / to the $routeProvider would fix something. It did not.

[JensRantil]

I can also recreate this in Firefox 19.0.2.

[JensRantil]

This is my $routeProvider:

angular.module('addressbook', [])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/colleagues', {
        templateUrl: 'partials/addressbook/colleagues.jsp',
        controller: ColleaguesListController
      })
      .when('/colleagues/:contactId', {
        templateUrl: 'partials/addressbook/colleagues.jsp',
        controller: ColleaguesListController
      })
      .when('/external', {
        templateUrl: 'partials/addressbook/externalcontacts.jsp',
        controller: ExternalContactsListController
      })
      .when('/external/:contactId', {
        templateUrl: 'partials/addressbook/externalcontacts.jsp',
        controller: ExternalContactsListController
      })
      .when('/contacts/:contactId', {
        controller: ContactsForwardingController,
        template: "Forwarding you to the right contact..."
      })
      .otherwise({redirectTo: '/colleagues'});
  }])
...

Loading the page with the otherwise(...) case triggered, also triggers the bug.

[JensRantil]

I have now isolated what triggers the $locationWatch. The piece of code is:

<div data-ng-controller="MyVoicemailController" data-ng-include src="'/partials/desktopimitation/voicemail.jsp'">
</div>

I also set the content of /partials/desktopimitation/voicemail.jsp to something very static to make sure that it wasn't in fact the underlying partial that was broken.

I'll see if I can reproduce this in a minimum viable example.

[JensRantil]

<div data-ng-controller="MyVoicemailController" data-ng-include src="'/partials/desktopimitation/voicemail.jsp'">
</div>

I inlining /partials/desktopimitation/voicemail.jsp in my HTML file was a successful workaround.

[JensRantil]

I tried, once again, to reproduce the issue here: https://gist.github.com/JensRantil/5670869 Unfortunately, I couldn't. I'm closing this issue. Reopen, if anyone has additional information.

[JensRantil]

I inlining /partials/desktopimitation/voicemail.jsp in my HTML file was a successful workaround.

I should also be mentioned that inlining voicemail.jsp as <script type="text/ng-template" ...> did not work either.

[arisbartee]

I had the exact same issue. Using the the "debugger;" statement, I looked at the call stack. I noticed calls into the JQuery library. I removed JQuery and it worked fine.

[JensRantil]

I noticed calls into the JQuery library. I removed JQuery and it worked fine.

Interesting. Out of curiousity, what jQuery version were you using? I'll post what version we are using tomorrow when I'm at work.

[arisbartee]

I was using JQuery 1.8 it was the default with middleman

[JensRantil]

I was using jQuery 1.7.2 and jQuery UI 1.8.11 (custom).

[apolishch]

Unfortunately taking jquery out entirely is not an option for me. I've temporarily resolved this by monkey patching the watch on $locationWatch in angular js from:

if ((!changeCounter || oldUrl != $location.absUrl()) {

to

if ((!changeCounter || oldUrl != $location.absUrl() && ($location.absUrl()+'#')!=oldUrl)) {

Obviously if your right separator is not '#', you will need to change the above line.

If anybody has any insight into how to solve this in a more sustainable manner, I'm all ears

[patorjk]

I'm getting the same error with Angular version 1.1.4. I removed jQuery and the problem goes away. I'm using jQuery version 1.9.1.