Routing Strategies

To enable HashLocationStrategy in an Angular application we pass {useHash: true} when we are providing our routes with RouterModule, like so:

URL can contain some data prepended with a # character.

The # part of the URL is called the hash fragment.

It’s normally used so that people can link to a particular section in a HTML page, specifically anchor tags, for example if there is an anchor tag with an name attribute of routing-strategies like so:

Then if you created a bookmark of

The browser would open somedomain.com/page and then scroll down so that the <a name="routing-strategies"></a> tag is at the top of the page.

However it has another very important characteristic in that anything past the # in a URL never gets sent to the server.

So if your URL was https://codecraft.tv/contact/#/foo/moo/loo then the browser makes a GET request to https://codecraft.tv/contact/ only.

The #/foo/moo/loo part of the URL is never sent.

If you were to look at your logs on the server you would never see any reference to #/foo/moo/loo

Another way to think about the hash fragment, since it’s never sent to the server, is that it’s for storing the state of your client application.

It’s therefore an ideal solution for implementing client side routing:-

And that’s exactly why, for a number of years, the primary way of implementing client-side routing was via hash fragments.

Taking a look at the app we’ve built so far, if running locally the URLs look something like:

According to the the server there is only ever one URL localhost:4040, the other hash fragment stuff is ignored by the server.

This is why we call what we are building a Single Page Application, there is only ever one page requested from the server. In the above example it’s localhost:4040 — the other pages are just changes to the hash fragment which the client application deals with, from the perspective of the server the whole site is just a single page.

This is the default strategy in Angular so we need to do nothing to enable it.

It takes advantage of a relatively new HTML5 API called pushstate (from the HTML5 history API).

By using pushstate we can change the URL and not have the browser request the page from the server and without needing to use a hash fragment.

So if we were at

By using the pushstate API we can change the URL to

And the browser won’t make a GET request to the server for /artist/1234/tracks.

That sounds perfect for client-side routing right?

Unfortunately it has one big downside: if we reload the page, or bookmark it and open it later, the browser would make a request to the server for e.g. localhost:4040/artist/1234/tracks.

By using a hash fragment the server never needs to know about any application URL, it will only ever get asked for the root page and it will only ever return the root page.

But by using a PathLocationStrategy the server needs to be able to return the main application code for every URL, not just the root URL.

So with PathLocationStrategy we need to co-operate with a server side that supports this functionality, it’s possible and quite easy to implement a server side like this but it does require some effort and cooperation.

The default client-side routing strategy used in Angular is the PathLocationStrategy.

This changes the URL programmatically using the HTML5 History API in such a way that the browser doesn’t make a request to the server for the new URL.

For this to work we do need to serve our Angular application from a server that supports requests on multiple different URLs, at a minimum all this server side needs to do is return the same page for all the different URLs that’s requested from it.

It’s not a lot of work but does need some co-operation from the server side.

PathLocationStrategy also sets us up for a future architecture where we can speed up loading time by pre-rendering the pages with Angular running on the server side and then once it’s downloaded to the browser the client can take over routing. This is called Angular Universal and it’s currently in development.

HashLocationStrategy uses the hash fragment part of the URL to store state for the client, it easier to setup and doesn’t require any co-operation from the server side but has the downside that it won’t work with Angular Universal once that’s released.