html5mode, state resolve object promise - when rejected, keeps activating the same page, results in infinite loop

[patrykbuzowicz]

Hello,

I guess the title is pretty self-explanatory. The problem is that when $location.html5mode(true); then if the promise object returned in resolve gets rejected, then the state is being activated again so I get the same promise object that gets rejected and so on.
I believe when the promise returned gets rejected, the state is being activated again.
Tried in IE, FF and Chrome, everytime I get my app blocked, 100% CPU usage and increasing RAM usage.

[christopherthielen]

http://bit.ly/UIR-Plunk

[patrykbuzowicz]

It cannot be explained with a plunkr so clear, yet this demonstrates what my point is
http://plnkr.co/edit/wMzNivJ1BzOxiCDIGVAq?p=info
after turning the html5mode on, the router cannot even load a html file to produce a view and keeps repeating the request that fails everytime (the request for the view fails because of a wrong path actually).
Due to the fact that it fails before my actual 'resolve' functions are executed, my point isn't that clearly stated. Yet I believe that the calls repeated for the html prove my point pretty much.

[christopherthielen]

@patrickmaster have a look here: http://plnkr.co/edit/JcHAuxsp2eEYES6tQMND?p=preview

I changed templateUrl to template in order to isolate just the resolve rejection and that does not appear to be the case. Your original plunk was failing because it was requesting "home.html" but the index.html didn't have a <base> tag. The route change fails and the .otherwise kicks in. The infinite loop is still a problem for ui-router, but it's something that should be caught during development time.

The angular docs state:
https://code.angularjs.org/1.2.26/docs/guide/$location

##Relative links
Be sure to check all relative links, images, scripts etc. You must either specify the url base in the head of your main html file () or you must use absolute urls (starting with /) everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application.

[christopherthielen]

One more note: plunker is difficult to use with html5mode as you've discovered. To test this, I downloaded your plunk (it's an icon in the header-bar of the plunkr). Then, I extracted the ZIP file to my local workstation and ran python -m SimpleHTTPServer 8888 in the parent directory to simulate plunkr, but with a url that I can apply a <base href='/foo'> tag to.

[christopherthielen]

cc: @jpulec

[christopherthielen]

here's a way to stop the infinite loop and debug/fix your app:
http://plnkr.co/edit/JseSQXlmfaAkxSrUtNnZ?p=preview
Change your otherwise to:

  $urlRouterProvider.otherwise(function($injector) { 
    $injector.get("$state").go("home"); 
    return true;
  });

This avoids setting the location immediately upon redirect. Let me know if any of these comments helps you.

summary for future me

• html5mode on
• .otherwise("/route")
• app.run() -> triggers otherwise("/route")
• route's UrlMatcher matches, -> $state.transitionTo("route")
• route begins loading
• route's templateUrl is requested, but 404's due to no tag
• route is rejected; url is reset to previous url ("")
• $locationChangeSuccess due to the url changing from /route to ""
• .otherwise("/route) is triggered.