PathLocationStrategy vs HashLocationStrategy in web apps

Question

What are the pros and cons of using:

1. PathLocationStrategy - the default "HTML 5 pushState" style.
2. HashLocationStrategy - the "hash URL" style.

for instance, using HashLocationStrategy will prevent the feature of scrolling to an element by its #ID, but some 3rd party plugins require the HashLocationStrategy or the Hashbang #! in order to work in ajax websites.

I would like to know which one offers more for a webapp.

Solution 1

For me the main difference is that the PathLocationStrategy requires a configuration on the server side to all the paths configured in @RouteConfig to be redirected to the main HTML page of your Angular2 application. Otherwise you will have some 404 errors when trying to reload your application in the browser or try to access it using a particular URL.

Here is a question that could give you some hints about this:

• When I refresh my website I get a 404. This is with Angular2 and firebase.

Hope it helps you, Thierry

Solution 2

# can only be processed on the client, the servers just ignore them. This can cause problems with search engines (SEO), redirects can cause redundant page reloads. This page https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling has some detailed explanation, while some of the arguments don't apply for Angular applications (for example - doesn't work with JS disabled).

The "disadvantage" of HTML5 pushstate is that is requires server support like explained by Thierry.

Solution 3

According to official docs:

When the router navigates to a new component view, it updates the browser's location and history with a URL for that view. This is a strictly local URL. The browser shouldn't send this URL to the server and should not reload the page.

PathLocationStrategy

Modern HTML5 browsers support history.pushState, a technique that changes a browser's location and history without triggering a server page request. The router can compose a "natural" URL that is indistinguishable from one that would otherwise require a page load.

Here's the HTML5 pushState style URL that routes to the xyz component: localhost:4200/xyz/

HashLocationStrategy

Older browsers send page requests to the server when the location URL changes unless the change occurs after a # (called the hash). Routers can take advantage of this exception by composing in-application route URLs with hashes.

Here's a hash style URL that routes to the xyz component: localhost:4200/src/#/xyz/

I would like to know which one offers more for a webapp.

Almost all Angular projects should use the default HTML5 style as:

1. It produces URLs that are easier for users to understand.
2. It preserves the option to do server-side rendering later.

Rendering critical pages on the server is a technique that can greatly improve perceived responsiveness when the app first loads. An app that would otherwise take ten or more seconds to start could be rendered on the server and delivered to the user's device in less than a second.

This option is only available if application URLs look like normal web URLs without hashes (#) in the middle.

Stick with the default unless you have a compelling reason to resort to hash routes.

Comments

[Phil]

I am sorry, but this answer is just missing the point completely. It says nothing about the possibility of setting up additional server-side-rendering and caching (isomorphic rendering) and how many benefits this brings. Instead of evaluating the technologies you just describe the solution to a problem that you had.