angular html5 mode fallback for deep routes not working

Question

I have set up html5 mode in angular with node.js but the fallback to hash does not work for routes more than 1 level deep for browsers that do not support html5 mode.

Server route to catch all:

app.all('/*', function(req, res) {
    console.log('serve');
    res.sendFile(__dirname+'/public/index.html');
});

I have included a base tag right after the opening head tag.

<base href="/">

Now when i visit a url like 'localhost/news'

For supporting browsers the site loads at the same url and the server is hit once, logging 'serve', for non supported browsers it changes the url to localhost/#/news which is great.

Now for a url like localhost/news/post1 the supporting browser again works fine, but non supporting browsers load the index.html file, with no style or JS and the server is hit many times, logging serve well over 50+ times, the URL is not modified and the page remains broken.

The browser I am testing against is IE9, does anyone know of a solution to this?

Answer 1

Have you tried setting the routes statically with express in your node server? For your route, in your server.js, it would look like this:

app.use('/news', express.static(__dirname + '/public'));