javascriptangularjshashbang

AngularJS - 404 error on page reload after Hashbang removal

After removing the hashbang from my routes using 

$locationProvider.html5Mode(true);

Now when visiting a page, for example "domain.com/download", it will work. But if I reloaded this exact page, it would give me an 404 Error. Links like "domain.com/download" can only be opened by typing "domain.com/#!/download". Once it loads it would redirect me to the normal "domain.com/download" page again.

Im using v1.3.2 for routing and v1.6.3 for the rest (dont ask me why I didnt make this site lol).

Solution

  • This is what the AngularJS Documentation says:

    Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a tag is also important for this case, as it allows AngularJS to differentiate between the part of the url that is the application base and the path that should be handled by the application.

    You'll have to change your .htaccess to something like:

    RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]