Refreshing page gives “Page not found”

Question

I have an app where it uses a single ng-view and multiple controllers and views. If I navigate through the root, eg: www.domain.com, everything works. Except that if I hit

Answer 1

You need to just add the below script in your .htaccess

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Answer 2

When the browser calls http://example.com/#!/item/1/, it is calling the index page of http://example.com/, your JS then determines what content to display by analysing the hashtag.

When the browser calls http://example.com/item/1/, your server is attempting to serve the index page of http://example.com/item/1/, which it cannot find and therefore throws a 404 error.

To achieve what you want, you'll either need to:

• Create a rewrite rule to rewrite the links to your root index page
• adjust your JS so that it generates the hashtag instead of the URL. If you are using AngularJS then turn off html5 mode with $locationProvider.html5Mode(false);, or
• put an index page in http://example.com/item/1/ that redirects to http://example.com/#!/item/1/ - however note that this would need to be repeated for every /prettyPath/ you crete.

Assuming you are using Apache and your index file is index.html, try adding the following to your .htaccess file to create a rewrite rule before trying either of the other two solutions.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)       /index.html/#/$1 
</IfModule>

If you are using a pure AngularJS/Ajax solution without a server side logic, change index.php to index.html (or index.htm depending on your root index filename).

Answer 3

    <ifModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_URI} !index
      RewriteCond %{REQUEST_URI} !.*\.(css  js|html|png)
      RewriteRule (.*) index.html [L]
    </ifModule>

use this as .htaccess

Answer 4

I couldn't comment but as well as using HTML mode, base href="/", sudo a2enmod rewrite, using .htaccess rewrite. I had to AllowOverride All in both the sites available of your site and the /etc/apache2 apache.conf

Answer 5

Great Blog Post on this here... http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/

"This is mainly because your AngularJS routes aren't actual html pages. An example would be if you have a route in your angular app to /create-order. This url works fine if you link to it from inside your app but if a user tries to go directly to that page the server will return a 404."

Answer 6

As of March 2018, Just add these below lines in your .htaccess file.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
#RewriteRule ^(.front-end*)$ /front-end [NC,L,QSA]
RewriteRule ^(.*)$ /index.html [NC,L,QSA]  

Hope this will be helpful for you.