Search code examples
javascriptangularjsinfinite-loopaddthis

AngularJS's html5Mode adds "#.U44k6nKSyyk" at the end of the URL and messes all the project up [AddThis "data_track_addressbar" option conflict]

I meet a strange issue when trying to convert the URL http://localhost:8080/myProject/#/me with AngularJS's html5mode (v1.2.1). The server is implemented using Spring MVC.

I have the following base set:

<base href="http://localhost:8080/myProject/" />

When I enable AngularJS's html5Mode:

$locationProvider.html5Mode(true).hashPrefix('!');

And navigate through:

http://localhost:8080/myProject/me

Everything seems to work as expected during the first seconds.

But then, the URL automatically get transformed to:

http://localhost:8080/myProject/me#.U44k6nKSyyk

And in the JavaScript's console, I get the following error repeated many times (just as if stuck in an infinite loop):

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 7; oldVal: 6","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/player.html\"; oldVal: undefined","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/filters.html\"; oldVal: undefined","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/videos.html\"; oldVal: undefined"],["fn: $locationWatch; newVal: 8; oldVal: 7","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/player.html\"; oldVal: undefined","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/filters.html\"; oldVal: undefined","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/videos.html\"; oldVal: undefined"],["fn: $locationWatch; newVal: 9; oldVal: 8","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/player.html\"; oldVal: undefined","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/filters.html\"; oldVal: undefined","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/videos.html\"; oldVal: undefined"],["fn: $locationWatch; newVal: 10; oldVal: 9","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/player.html\"; oldVal: undefined","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/filters.html\"; oldVal: undefined","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/videos.html\"; oldVal: undefined"],["fn: $locationWatch; newVal: 11; oldVal: 10","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/player.html\"; oldVal: undefined","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/filters.html\"; oldVal: undefined","fn: sceParseAsTrusted; newVal: \"static-1.0.0.2/html/videos.html\"; oldVal: undefined"]]
http://errors.angularjs.org/1.2.1/$rootScope/infdig[...]
    at lowercase (http://localhost:18080/myProject/static-1.0.0.2/lib/angularjs-1.2.1/angular.js:78:12)
    at Scope.$get.Scope.$digest (http://localhost:18080/myProject/static-1.0.0.2/lib/angularjs-1.2.1/angular.js:11472:19)
    at Scope.$get.Scope.$apply (http://localhost:18080/myProject/static-1.0.0.2/lib/angularjs-1.2.1/angular.js:11682:24)
    at done (http://localhost:18080/myProject/static-1.0.0.2/lib/angularjs-1.2.1/angular.js:7699:45)
    at completeRequest (http://localhost:18080/myProject/static-1.0.0.2/lib/angularjs-1.2.1/angular.js:7865:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:18080/myProject/static-1.0.0.2/lib/angularjs-1.2.1/angular.js:7821:11)

I used Tuckey's UrlRewriteFilter server-side:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 4.0//EN" "http://www.tuckey.org/res/dtds/urlrewrite4.0.dtd">
<urlrewrite>

    <rule>
        <from>^/me</from>
        <to>/</to>
    </rule>

</urlrewrite>

What's strange is that, when I comment the .html5Mode(true).hashPrefix('!'); line, the #/me URL behaves as expected (no error, no extra URL suffix...).

Any idea where this issue could come from? Don't hesitate to ask me more details on some points if you have a hunch ;)

Solution

  • Wow...

    I added long ago AddThis to my project, and had the data_track_addressbar option set to true.

    The #.U44k6nKSyyk suffix I noticed was actually the AddThis semi-random value which identifies each page view.

    There must be a conflict between this AddThis data_track_addressbar option and AngularJS's html5Mode, since when disabling the option, everything works finally as expected... What an absurd bug!

    If anyone understands why, I would be interested into an explication ;)