Search code examples
javascriptangularjshashbang

AngularJS - Fallback to hashtag from HTML 5 mode

I am developing Angular app with the html5mode set to true. Everything works great, and it even has responsive template. During testing however I experienced terrible bug with the browsers not supporting the History API. Imagine I have url like

http://www.example.com/en/

or

http://ww.example.com/en/tourist-routes/

using history api everything works as expected. But when fallback mode is present it is causing endless refresh loop like this.

http://www.example.com/en/#!/en - the expected behavior
http://www.example.com/en#!/en#!%2Fen
http://www.example.com/en#!/en#!%2Fen%23!%2Fen - and so on

Like it is trying to rewrite "modern" url to the hashbang one.

Of course I am not only one experienced this problem. However most of the solutions consisted by specifying 

<base href="/" />

tag in the head. Unfortunately this is not working for me. BUT if I provide in the base tag href with the requested uri I can get some of the links to the work. It is not working completly plus it is ugly hack. Also note that /en is not directory in which angular app resides!

Thank for any help in advance....

Solution

  • Well, I figured it out. The problem was not with the hashbang itself. I am parsing url in the back end to provide config e.t.c One of the params and only one mandatory is Language. Hovewer due to the hashbang redirect it was stripped out and system tryied to force default language in the url.