When I Refresh The Page, Not The Page Loads. Angularjs + Nodejs

When I reload the page by pressing F5, the page does not reload. I am using Node.js, Express Js and AngularJS. index.html

Solution 1:

Since there isn't much to go off of, I'll throw the obvious fix out first.

Your routing isn't set up to handle a single page app.

Angular's router is swapping views in and out of the index page when you route around in it, but you never actually leave that first page. This is the desired behavior for a single page app.

If you refresh on a page such as index.com/go/to/path, you're telling you browser to actually go to to that path index.com/go/to/path.

Angular has no idea about this and it's routing only handles the paths tossed around on index.com.

if you use nginx, add this to your location:

try_files $uri$uri/ /index.html;

The solution would be similar, if not the same, in apache (dont know off the top of my head).

What it does is it redirects all of those app.com/paths/more/paths to app.com/

There, angular will read the /paths/more/paths and load the proper view.

Solution 2:

try this

res.sendFile(path.join(__dirname, '/public', 'index.html'));

it will redirect to index.html when you press f5.

Solution 3:

Try this

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/www'));

app.all('/*', function(req, res, next) {
  // Just send the index.html for other files to support HTML5Mode
  res.sendFile('www/index.html', { root: __dirname });
});