Menu
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.
710
Try setting
<base href="/" />
in the head? It may be an angular 1.1.5 bug/feature.
100
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
