Angularjs html5Mode(true) page reload error with Node.js Server

Question

I have used routeProvider and stateProvider in Angular js with HTML5 mode true. Everything is working fine until I refresh the page.

I am using Node.js server, I am not getting what to write on server side so that I don't get "Can not find" error.

Please help me with this, I am not getting any answers from other similar posts.

here's the code of state provider

   $stateProvider
  .state("/", angularAMD.route({
    url: '/',
    templateUrl: 'Default/default.html'
  }))
  .state("aboutUs", angularAMD.route({
    url: '/aboutUs',
    templateUrl: 'AboutUs.html'
  }))
  .state("contactUs", angularAMD.route({
    url: '/contactUs',
    templateUrl: 'ContactUs.html'
  }))
  .state("order", angularAMD.route({
    url: '/order',
    templateUrl: 'order/order.html',
    controllerUrl: "order/OrderController"
  }))
  .state("signin", angularAMD.route({
    url: '/signin',
    templateUrl: 'LoginSignup/Login.html',
    controllerUrl: "LoginSignup/LoginController"
  }))
  .state("dashboard", angularAMD.route({
    url: '/dashboard',
    templateUrl: 'Dashboard/dashboard.html',
    controllerUrl: "Dashboard/dashboardController"
  }))
  .state("thankYou", angularAMD.route({
    url: '/ThankYou.html',
    templateUrl: 'ThankYou.html'
  }));
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);

I'm not totally sure what you mean. Are you saying the issue is that your content loads only when on the index page and then when changing routes and refreshing it no longer works ? — pizzarob
– pizzarob, Commented Jan 15, 2016 at 18:19
for example I have menu link "/order" when I click on it, address in browser becomes localhost:8080/order and I get the order template perfectly but when I refresh the page it says "can not find /order" — Nishank Singla
– Nishank Singla, Commented Jan 15, 2016 at 18:23
yeah the reason for this is because on refresh your server doesnt have any logic set up to handle the "/order" route, but your client side JS files do, but those are loaded only on the index page. What you need to do is redirect all routes to your index route like Joe Lloyd's answers says to do — pizzarob
– pizzarob, Commented Jan 15, 2016 at 18:26
I tried this but this thing is messing with my other routes. Eg. I am requesting a data using $http.get("/abcd") and in response of this my server sends some data but when I write this code app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('public/index.html', { root: __dirname }); }); I got index.html text in response. also this code send me to the home page instead of localhost:8080/order to localhost:8080 — Nishank Singla
– Nishank Singla, Commented Jan 15, 2016 at 18:28
app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('public/index.html', { root: __dirname }); }); using this takes me to the home page instead of "/order" — Nishank Singla
– Nishank Singla, Commented Jan 15, 2016 at 18:40

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Use the following snippet in Express

I fixed my app with this in Express.js on the nodejs server.

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

it looks in the correct place for the page refresh.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 15, 2016 at 18:20

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nishank Singla Over a year ago

I did the same thing, with this it goes to my home page not on the current page.

Joe Lloyd Over a year ago

@NishankSingla I took this from an old project that i was working on I can't quite remember how I figured it out but feel free to checkout my public git repo app.js file here

pizzarob · Accepted Answer · 2016-01-15 18:46:43Z

0

You will need to load your index file with your angular code on refresh, like Joe Lloyd said. In order to allow your other routes to work (the routes that return data) you can check for them and call the next function if it is a match. Here is an example:

app.use((req, res, next) => {

    // if the requested route matches a route that should return data then
    // we check for it here and call the next function and return, which will skip over serving the index.html page
    if(req.url.indexOf('/get-data-route')){
        return next();
    }

    // if the route does not match an API route serve the index file
    // this is using a template string, if you are using an older version of node
    // replace the template string with a regular string
    res.sendFile(`${__dirname}/index.html`);
});

answered Jan 15, 2016 at 18:46

pizzarob

12.1k7 gold badges51 silver badges70 bronze badges

3 Comments

Nishank Singla Over a year ago

sending index.html from node server takes me to the home page instead of the page on which I pressed the refresh button. For example if I refresh the page "localhost:8080/order" and this code takes me to the "localhost:8080" instead of "localhost:8080/order"

pizzarob Over a year ago

Have you tried this? Refreshing while using this code will keep you on "/order" but it will serve this index.html file (hopefully the index file has your angular code) then the angular code should load and render the correct data for "/order". But you are saying this is not the case

Nishank Singla Over a year ago

yes I have tried this. /order is not loading, It is going back to home page localhost:8080

Collectives™ on Stack Overflow

Angularjs html5Mode(true) page reload error with Node.js Server

2 Answers 2

Use the following snippet in Express

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Use the following snippet in Express

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related