Angularjs Routing 404 Error with HTML5 Mode

AngularJS routing 404 error with HTML5 mode

HTML5 mode requires URL rewriting.

From the Docs:

HTML5 Mode

Server side

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

— AngularJS Developer Guide - Using $location (HTML5 Mode Server Side)

For NodeJS and ExpressJS

var express = require('express');
var path = require('path');
var router = express.Router();

// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));

// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {
    res.sendFile(path.resolve('app/index.html'));
});

module.exports = router;

For IIS on Windows

<rewrite>
  <rules>
    <rule name="AngularJS" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

See, How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?

For apache

RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^

See, How to rewrite url in apache htaccess for angularjs app

For more information

Article: AngularJS - Enable HTML5 Mode Page Refresh Without 404 Errors in NodeJS and IIS.

AngularJS routes returns 404 error when page is being refresh

Finally I found a solution, I already met this solution before but It doesn't work for me because I forget to remove the /localhost/ from the .htaccess! Here it is:

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d

    RewriteRule ^ - [L]

    RewriteRule (.*) /cvsrrc/index.php [L]
</IfModule>

AngularJS 1.0.7 in html5Mode get 404 error when refresh page

So the idea is to force Nginx to point all htpp requests to index.html and let the Angular do the routing in your application.

You didn`t post any configuration so here is the most basic:

server {
 listen 80;
 server_name foobar.com www.foobar.com;
 index index.html;
 root /var/www/mysite;

location / {
  try_files $uri$args $uri$args/ index.html;
 }
}

AngularJS - 404 error on page reload after Hashbang removal

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]

---

Related Topics