How to enable navigation to a URL's hash with AngularJS's HTML5mode?

Question

I have html5mode enabled in my AngularJS application so I can access paths with the URL format site.com/path instead of site.com/#/path.

But navigation to a hash is not working properly with html5mode enabled. When I navigate to site.com/#hash through Chrome, the URL automatically changes to site.com/hash. Since hash is not a resource on the server, this URL results in the loading of the default index.html file instead of scrolling to the hash location.

This seems to be a very trivial use case but how can I make the URL format site.com/#hash work as expected with AngularJS?

After removing html5mode, the URL needs to be `site.com/#/#hash` for the hash to work instead of `site.com/#hash` — Price, Nov 03 '15 at 06:00
if you add `#hash` it will not create any problem as it stays to client side only.Did you try to hit directly using same url on chrome address bar — Arpit Srivastava, Nov 03 '15 at 06:02
In hashbang mode, if I enter the URL `site.com/#hash`, Chrome changes it to `site.com/#/hash`. — Price, Nov 03 '15 at 06:13
Please note this html5mode behavior in the question: "When I navigate to site.com/#hash through Chrome, the URL automatically changes to site.com/hash." — Price, Nov 03 '15 at 07:05

score 0 · Accepted Answer · edited May 23 '17 at 11:59

I got it to work with the help of:

this StackOverflow question: Can I reclaim control of the URL hash-fragment from AngularJS?
and an indirect hint from the AngularJS docs: https://docs.angularjs.org/error/$location/nobase

Quoting from the docs page:

Note that removing the requirement for a tag will have adverse side effects when resolving relative paths with $location in IE9.

To summarize, Angular leaves hash-fragments in the URL untouched only if:

html5mode is enabled,
hash prefix has been set,
and you have not set requireBase:false while enabling html5mode

No wonder people find it difficult to grasp AngularJS: the documentation is weak and the framework is like a magic black-box that takes control of your app away from you.

How to enable navigation to a URL's hash with AngularJS's HTML5mode?

1 Answers1