infinite $digest when using history api

[mrhooray]

I encountered this issue when using Dropbox Datastore API, which invokes history.replaceState after OAuth redirection. By adding a callback to $routeChangeStart event, it seems the app is doing routing repeatedly.

Only use $location may not always be possible when involving third party library or other app. Is there a workaround or imminent fix on this?

Angular Version(s): 1.2.15
Browsers and Operating System: Chrome 33 on OS X 10.9
Reproduce Error: http://jsfiddle.net/7t7eK/ from #1417 with Angular 1.2.15
Related issues: #1417 , #3924

Error and trace that I got:

10x on $routeChangeStart
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 7; oldVal: 6"],["fn: $locationWatch; newVal: 8; oldVal: 7"],["fn: $locationWatch; newVal: 9; oldVal: 8"],["fn: $locationWatch; newVal: 10; oldVal: 9"],["fn: $locationWatch; newVal: 11; oldVal: 10"]]
http://errors.angularjs.org/1.2.15/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…2fn%3A%20%24locationWatch%3B%20newVal%3A%2011%3B%20oldVal%3A%2010%22%5D%5D
    at http://localhost:9000/bower_components/angular/angular.js:78:12
    at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12070:19)
    at Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:12279:24)
    at http://localhost:9000/bower_components/angular/angular.js:1382:15
    at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:3805:17)
    at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1380:14)
    at bootstrap (http://localhost:9000/bower_components/angular/angular.js:1394:12)
    at angularInit (http://localhost:9000/bower_components/angular/angular.js:1307:5)
    at http://localhost:9000/bower_components/angular/angular.js:21163:5
    at HTMLDocument.trigger (http://localhost:9000/bower_components/angular/angular.js:2445:7) angular.js:9563
(anonymous function) angular.js:9563
(anonymous function) angular.js:7004
Scope.$apply angular.js:12281
(anonymous function) angular.js:1382
invoke angular.js:3805
doBootstrap angular.js:1380
bootstrap angular.js:1394
angularInit angular.js:1307
(anonymous function) angular.js:21163
trigger angular.js:2445
(anonymous function) angular.js:2716
forEach angular.js:330
eventHandler angular.js:2715

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 7; oldVal: 6"],["fn: $locationWatch; newVal: 8; oldVal: 7"],["fn: $locationWatch; newVal: 9; oldV...<omitted>...5D angular.js:78
(anonymous function) angular.js:78
Scope.$digest angular.js:12070
Scope.$apply angular.js:12279
(anonymous function) angular.js:1382
invoke angular.js:3805
doBootstrap angular.js:1380
bootstrap angular.js:1394
angularInit angular.js:1307
(anonymous function) angular.js:21163
trigger angular.js:2445
(anonymous function) angular.js:2716
forEach angular.js:330
eventHandler angular.js:2715
on $routeChangeStart 
on $routeChangeStart 
on $routeChangeStart 

[m3kka]

This problem present itself also on Windows Phone running IE9.

[IgorMinar]

@jeffbcross this looks similar to the encoding issue we discussed today (#5019)

[IgorMinar]

@jeffbcross can you please take a look

[jeffbcross]

@IgorMinar yep

[jeffbcross]

Reproduction as test:

  it('should not cause infinite digest when replacing outside of Angular', function() {
      module(function($windowProvider, $locationProvider, $browserProvider) {
        // $locationProvider.html5Mode(true);

        $browserProvider.$get = function($document, $window) {
          var sniffer = {history: true, hashchange: true}
          var logs = {log:[], warn:[], info:[], error:[]};
          var fakeLog = {log: function() { logs.log.push(slice.call(arguments)); },
                     warn: function() { logs.warn.push(slice.call(arguments)); },
                     info: function() { logs.info.push(slice.call(arguments)); },
                     error: function() { logs.error.push(slice.call(arguments)); }};


          var b = new Browser($window, $document, fakeLog, sniffer);
          b.pollFns = [];
          return b;
        }
      });

      inject(function($rootScope, $location){
        window.history.replaceState(null, '', '/hello');
        expect(function() {
          $rootScope.$digest();
        }).not.toThrow();
      });
    });

[jeffbcross]

The problem is caused because Angular isn't synchronously notified of changes to the browser's url, and trusts its cached version of the url inside $browser.url(). Since $browser.url() as a getter is idempotent, it keeps returning the true url without updating its internal record of what the url is.

To verify that this is true, add this line in the provided test just after the window.history.replaceState line, and the test will pass: angular.element($window).triggerHandler('popstate');

This issue could be easily fixed with one line inside of $browser, by resetting lastBrowserUrl inside the url getter: lastBrowserUrl = newLocation || location.href.replace(/%27/g,"'"); But this could cause unwanted side effects. Still exploring...

[jeffbcross]

My fix from the previous comment fixes the infinite digest error, but doesn't actually retain the new path.