Anchor links in HTML5 mode go to 'base url' and trigger a navigation event

[fwielstra]

I have an app with $locationProvider.html5Mode(true), so no hashes in the URLs; I figured I could use anchors like they used to again, but unfortunately that doesn't seem to be the case.

I made a plunkr to try and highlight the problem:

http://plnkr.co/edit/Upc89hCMMVbAhJaV2XYd?p=preview

full-screen with visible path version: http://run.plnkr.co/IA9Gwp52MzFpE1O6/

Issue 1 is that an <a href="#anchor"> will link to http://host/#anchor, instead of http://host/currenPath/#anchor.

Issue 2 is that when I create an url <a href="path/#anchor"> and click it, a navigation event is triggered - highlighted in the plunkr by a page transition animation.

StackOverflow questions offer answers like this work around the limitation by calling $location.hash() and $anchorScroll, but those will also trigger a navigation event. The second solution there is to reset $location.hash to the old value - i.e. none - to avoid the navigation event from triggering, but that removes the option to link directly to anchors from other pages and removes bookmarkability.

I came across issue #648 which seems to outline the same issue (two years ago), but it seems it stopped working sometime since then.

tl;dr: I'd like to do <a href="#anchor"> that links to an anchor at the current route, but it links to the base URL and triggers a navigation event.

[vojtajina]

@fwielstra You need to 1. set the <base href> without the trailing slash, 2. configure hashPrefix
(see http://plnkr.co/edit/tgin0gpQl1qwu9hVXBno?p=preview). Then it works.

I totally agree that this is not simple at all! I have a suggestion to make this better - when you set html5Mode to true, we should set the hashPrefix to some default value (probably !). We need to make sure we set it only if it has not been already overridden. Any other ideas?

Also, when clicking the first two links (#lorem, #ipsum) there is some url flickering going on (the url is set to the base path first) - that should not happen. I think that's a bug.

So action items:

1. set hashPrefix if html5Mode
2. fix the url flickering bug

[fwielstra]

Apologies for the late reply, christmas intervened :p. Thanks for the reply and investigating.

It does seem to sort of work in the plunkr now, yeah, minus the URL flickering you noticed yourself - and in the preview (with visible url), the plunker ID is replaced completely by '/path'. In my local / real application, the base href was '/'; removing it breaks all relative urls, breaking the application. The hashPrefix didn't seem to change anything, and an will create a link that leads to the 'base' href / the domain name.

[binarykitchen]

Hello guys, this bug is nasty - I experience a similar problem with the navigation event.

When I come from a page with anchors in the URL to the home page, duplicate navigation events are fired. For example from https://localhost:8080/versions#0.9.0 to https://localhost:8080/ will run the controller for / twice. This is messing up with the whole app.