Angular ui-router pressing refresh causes 404 erro

Question

OK, I know this is an open ended question, but -

I'm running an application using AngularJS 1.4.x and ui-router. For the most part everything works fine and as expected. My various pages use ui-sref's to navigate, pages show up as expected, and the URL that's showing looks correct. However, if I refresh the page (F5) on any page at all, it causes a 404 error to occur. And typing in the URL no longer works.

Things that might be involved:

• I turned on the $locationProvider.html5Mode(true) flag

• I use

  $rootScope.$on('$stateChangeStart', function (event, toState, toParams)

  to manage page access (authentication)

• <base href="/"> is in my index.html because html5Mode() won't work without it

Answer 1

This will be due to your server routes not being set up correctly and Angular is not being loaded in time to handle the routing. You need to make sure you have a catch-all route set up on your server that sends your index page for all non-api url calls so that Angular will then have chance to load and manage the routing.

You haven't specified your server language but in node/express it would be something like:

app.use('/*', express.static('./path/to/index.html'));

Answer 2

Q: When you refresh the page, what is actually happening?

A: You're sending an HTTP request via your browser to a server. GET /whatever. So the server will need to have a route set up for this request that responds with index.html. Currently, you're getting a 404 because your server doesn't have a route that matches the request to GET /whatever.

Q: Why?

A: When you make a request via your browser (rather than through AJAX), your browser will try to display the response to you. Ex. if the response is JSON, it'll show you JSON. If it's a string, it'll show you a string. If it's an html page, it'll show you that. You can't just send back a template for whatever route, because if you do, it'll just render that template with no other context. You need index.html to load angular, run your controller, place the template in it's ui-view container, etc.

(What'll happen is index.html will be sent back, UI Router will check the route, make a request for the templateUrl, run the controller, and then render it.)

Q: How?

A: That depends on a) what type of server you're using and b) your file structure. You'll probably want some sort of catch all route at the end of your route file that serves index.html. This is how I do it with Node/Express:

app.get('/*', function(req, res) {
  var url = path.resolve(__dirname + '/../client/index.html');
  res.sendFile(url, null, function(err) {
    if (err) res.status(500).send(err);
    else res.status(200).end();
  });
});

Answer 3

@Adam Zerner described it quite nicely. I also managed to find these nice posts:

AngularJS HTML5 mode reloading the page gives wrong GET request

Page reload fails when using Angular Ui Router with Html5 mode enabled

So, given the problem lies in you server's routing config, you could obviously:

1. check your .htaccess setup
2. set some catch all route config in your server's routing configuration

or simply:

3. serve your templates (through some simple generic controller function)

This might sound like it's going against the dynamic routing you seek, but since no other option offers a better solution to this problem, this just might be the simple and most elegant one.

Think about it, in any of the other solutions offered, you still need to pass through the server, be it a routing rule or simply serving your request - the cost stays roughly the same, even if there is a difference - it should be negligible.