Ben Lesh Ben Lesh - 1 month ago 13
AngularJS Question

Single page app in AngularJS and ASP.Net works fine, but when I refresh my page in the browser I get 404 errors

So I've set up an HTML5 single page application, and it's working well. The page is at

/App/
and when some one goes to content it looks like
/App/Content/1234
.

One problem: If the user refreshes the page the server can't find that URL because it doesn't actually exist. If I send them to
/App/#/Content/1234
, they're golden, but what is the best way to do this? I have a LOT of different styles of URL under /App.

What is the best way to globally catch any request under
~/App/(.*)
and redirect it to
~/App/#/$1
?

The only route registered in MVC is the standard OOTB route.

Answer Source

Sounds like your server is not re-writing the urls to the app's base URL.

The URL re-writing needed on the web server is server-dependent. For Apache, you'd use mod_rewrite.

Instead, switch Angular to the "Hashbang mode" (the default) so the urls will all store the local state after the # in the url.

I don't want my apps to require server configuration changes, so I recommend hashbang mode.

See AngularJS docs. See section "Hashbang and HTML5 Modes" The HTML5 mode section describes all the configuration issues needed to support HTML5 mode for the urls.