CODEWITHSUNDEEP
angularjsnode.jsexpress
Mišel Ademi
Mišel Ademi

Reputation: 183

Express angular refresh page error 404

I am using Angular with express. I am having problem when I try to refresh page which is not main '/', like register page http://localhost:3000/registerit gives me 404 error page not found.

Then I added this code to my server.js (express file)

app.all('/*', function(req, res) {
    res.sendfile('public/index.html');
});

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.

My server.js file is

    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;

And thi is my angular routing

    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);
})

Upvotes: 2

Views: 3063

Answers (1)

Tushar Arora
Tushar Arora

Reputation: 1146

app.all('/*', function(req, res) { 
    res.sendfile('public/index.html'); 
});

Remove app.use('/', index); and it should work fine as it does not allow above route to send index.html every time it encounters route other than and including '/'

Upvotes: 2

Related Questions