title: Express angular refresh page error 404
body: <p>I am using Angular with express. I am having problem when I try to refresh page which is not main <code>'/'</code>, like register page <code>http://localhost:3000/register</code>it gives me 404 error page not found.</p>
  
  <p>Then I added this code to my server.js (express file)</p>
  
  <pre><code>app.all('/*', function(req, res) {
      res.sendfile('public/index.html');
  });
  </code></pre>
  
  <p>but It i snow always redirecting to root url. I want when I refresh page to refresh me the page I am on and to give me the same page again.</p>
  
  <p>My server.js file is</p>
  
  <pre><code>    var express = require('express');
      var path = require('path');
      var favicon = require('serve-favicon'); 
      var logger = require('morgan');
      var passport = require('passport');
      var session = require('express-session');
      var cookieParser = require('cookie-parser');
      var bodyParser = require('body-parser');
      var mongoose = require('mongoose');
      //connect to mongodb
      require('./models/user.js');
      require('./models/item.js');
      mongoose.connect("mongodb://localhost:27017/web-shop");
  
      var index = require('./routes/index');
      var api = require('./routes/api');
      var authenticate = require('./routes/authenticate')(passport);
  
      var app = express();
  
      // view engine setup
      app.set('views', path.join(__dirname, 'views'));
      app.set('view engine', 'ejs');
  
     // uncomment after placing your favicon in /public
     //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
     app.use(logger('dev'));
     app.use(session({
          secret: 'super duper secret'
     }));
      app.use(bodyParser.json());
      app.use(bodyParser.urlencoded({ extended: false }));
      app.use(cookieParser());
      app.use(express.static(path.join(__dirname, 'public')));
      app.use(passport.initialize());
      app.use(passport.session());
  
      //Initialize Passport
      var initPassport = require('./passport-init');
      initPassport(passport);
  
      app.use('/', index);
      app.use('/api', api);
      app.use('/auth', authenticate);
  
  
      app.all('/*', function(req, res) {
          res.sendfile('public/index.html');
      });
  
  
      // catch 404 and forward to error handler
      app.use(function(req, res, next) {
          var err = new Error('Not Found');
          err.status = 404;
          next(err);
      });
  
      // error handlers
  
      // development error handler
      // will print stacktrace
      if (app.get('env') === 'development') {
            app.use(function(err, req, res, next) {
            res.status(err.status || 500);
            res.render('error', {
                 message: err.message,
                 error: err
            });
         });
      }
  
  // production error handler
  // no stacktraces leaked to user
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: {}
    });
  });
  
  
  module.exports = app;
  </code></pre>
  
  <p>And thi is my angular routing</p>
  
  <pre><code>    app.config(function ($routeProvider, $locationProvider) {
      $routeProvider
          .when('/', {
              templateUrl: 'main.html',
              controller: 'itemController'
          })
          .when('/login', {
              templateUrl: 'login.html',
              controller: 'authController'
          })
          .when('/register', {
              templateUrl: 'register.html',
              controller: 'authController'
          })
          .when('/add_item', {
              templateUrl: 'dashboard.html',
              controller: 'itemController'
          })
  
          $locationProvider.html5Mode(true);
  })
  </code></pre>