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?

Answer 1

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.