AngularJS: Hashbang URL keeps appending to itself on full refresh

Question

I have an angularJS app, configured with the following:

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

So in modern browsers, it works with pushstate no problem, an example URL would be:

http://myapp.com/members

In older browsers, e.g. IE9, when I browse to that URL, it rewrites it as expected to:

http://myapp.com/members#!/members

Clicking any links from this point on uses the hashbang method, also correctly:

http://myapp.com/members#!/members/add

However...

If I full reload a page once it's on a hashbang rewritten url, it will keep appending the hash to itself. First refresh:

http://myapp.com/members#!/members#!/members#!%2Fmembers

.. and second refresh:

http://myapp.com/members#!/members#!/members#!%2Fmembers#!/members#!%2Fmembers%23!%2Fmembers%23!%2Fmembers

What is going on here that could be causing this? Usually it won't happen as people will navigate within the app and angular will handle the urls, but doing a full reload seems to break it. Thanks.

"In older browsers, e.g. IE9" Well there's your problem! LOL (I know, not helpful, but as penance, now I'll go and look for our shim code on this.) — Sharondio, May 30 '13 at 15:49

score 6 · Accepted Answer · answered May 30 '13 at 19:33

6

Try setting

<base href="/" />

in the head? It may be an angular 1.1.5 bug/feature.

answered May 30 '13 at 19:33

laurelnaiad

4,558
4
20
18

THANK YOU! Even on modern browsers that support the History API, the hashbang url wouldn't rewrite correctly to the non-hashbang url. I spent too much time banging my head on this, but now it works. Thanks! – gengkev Aug 11 '13 at 04:48
Note that in angular 1.2, declaring a base url is not recommended anymore actually http://docs.angularjs.org/guide/dev_guide.services.$location – Daan Dec 11 '13 at 11:14
1

Note that in Angular 1.3+, declaring a base url **IS** recommended: https://docs.angularjs.org/error/$location/nobase – Zanon Aug 09 '15 at 04:59

score 1 · Answer 2 · edited May 23 '17 at 12:32

Placing a <base> tag in your <head> seems to be the way to go...

<head>
    <base href="/">
</head>

...but there might be more that needs to be done. I set my $locationProvider to html5Mode too and got errors when I loaded my page.

myAngularModule.config($locationProvider =>
{
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false,
        rewriteLinks: false
    });
});

I also had to configure my server for html5Mode.

AngularJS: Hashbang URL keeps appending to itself on full refresh

2 Answers2