angular html5 mode fallback for deep routes not working

0
votes

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?

1
javascriptangularjs
What router? What does deep url look like in IE9? What do url's look like for assets like js and css when this happens? - charlietfl
the url remains the same so if I hit the site at localhost/news/post-1 it does not change at all - and ui-router - wazzaday
using absolute paths to assets either with or without protocol/domain would fix asset problem. Not sure what router you are using or versions - charlietfl
ok, ill try that thanks - wazzaday
no, I ended up having to detect for ie9 and changing a rootScope variable to be '#'. This worked for linking within the site, but would not work when say sharing a link via social networking - wazzaday

1 Answers

0
votes

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'));