Refreshing page gives "Page not found"

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 Ctrl+R (Refresh) then it gives me the 404 eror Page not Found. eg: refreshing on this page gives me error. http://domain.com/item/1/.

But if I access the page using the hashbang then it works.eg: http://domain.com/#!/item/1/

How shall I fix this problem? My htacess is empty. And Im using chrome which support html5 hashbang.

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

When the browser calls http://domain.com/1/, your server is attempting to serve the index page of http://domain.com/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
  • put an index page in http://domain.com/1/ that redirects to http://domain.com/#!/item/1/, or
  • adjust your JS so that it generates the hashtag instead of the URL.

Assuming you are using Apache and your index file is index.php, try adding the following to your .htaccess file

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

this is the .NET version of URL rewrite (IIS)

<system.webServer>
    <rewrite>
      <!--This directive was not converted because it is not supported by IIS: RewriteBase /.-->
      <rules>
        <rule name="Imported Rule 1" stopProcessing="true">
          <match url="^index\.html" ignoreCase="false" />
          <action type="None" />
        </rule>
        <rule name="Imported Rule 2" stopProcessing="true">
          <match url="." ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

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."