Geek Answers Handbook

Angular update ui-router update causes 404 error

Ok, I know this is an open question, but -

I am running the application using AngularJS 1.4.x and ui-router. For the most part, everything is working fine and as expected. Ui-sref is used on different pages for navigation, pages are displayed as expected, and the displayed URL looks correct. However, if I refresh the page (F5) on any page at all, it causes a 404 error. And entering text in the URL no longer works.

Things that can be involved:

  • I have enabled the flag $locationProvider.html5Mode(true)

  • I use

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

    to control access to the page (authentication)

  • <base href="/"> in my index.html, because html5Mode () would not work without it
+4
source share
3 answers

Q: When you refresh the page, what really happens?

A: You send an HTTP request through your browser to the server. GET /whatever . Thus, the server will need to configure the route for this request, which responds with index.html . You are currently getting 404 because your server does not have a route that matches the GET /whatever request.

Q: Why?

A: When you make a request through your browser (and not through AJAX), your browser will try to display a response to you. Ex. if the response is JSON, it will show you JSON. If it is a string, it will show you a string. If this is an html page, this will show you this. You cannot simply send a template for any route, because if you do, it will simply display this template without any other context. You need index.html download angular, launch your controller, put the ui-view template in it, etc.

(What happens is that index.html will be sent, the UI Router will check the route, execute the request for templateUrl , start the controller, and then display it.)

Q: How?

A: It depends on what type of server you are using, and b) the structure of your file. You will probably need some way to catch the entire route at the end of your route file, which serves index.html . Here's 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(); }); });
+7
source

@Adam Zerner described it pretty well. I also managed to find these nice posts:

AngularJS HTML5 page reload mode gives invalid GET request

Page reload when using Angular Ui Router with Html5 enabled

So , given that the problem is the server configuration, you can:

  • check .htaccess settings
  • establish some scheme for catching all routes in the server routing configuration.

or simply:

  1. Serve your templates (through a simple common controller function)

It may sound like it is against the dynamic routing you are looking for, but since no other option offers a better solution to this problem, it just might be the simplest and most elegant.

Think about it, in any of the proposed solutions you still need to go through the server, whether it be a routing rule or just serve your request - the cost remains approximately the same, even if there is a difference - it should be insignificant.

+2
source

This will be due to the incorrect configuration of your server routes and Angular will not load in time for routing processing. You need to make sure that you have the entire route configured on your server that sends your index page for all non-api url calls, so that Angular has the ability to load and manage routing.

You did not specify your server language, but in node / express it will be something like:

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

More articles:


All Articles