node.js/angular.js - Cannot GET

Question

I have the root route and it works fine. I also have a another route 127.0.0.1:3000/dashboard if I just type that url into the address bar I get this error:

Cannot GET /

Answer 1

The reason this does not work is that your server is not catching all other routes and routing them to your single page app which is served by routes.index.

In order to catch all other routes and route them to the index page so that your angular app can see if it matches the supplied url all you need to do is add the following line after your last route is declared:

app.get('*', routes.index);

Now you should be able to:

• navigate directly to a url served by your Angular.js app
• refresh any page without error

Answer 2

I'd suggest a pretty fast javascript solution in front and back end.

NodeJs

// set up our one route to the index.html file
    app.get('*', function (req, res){
    res.sendFile(path.join(__dirname+'/public/index.html'));
});

This code tells to de local/remote server where is the main html, so it could find the rest of templates.

AngularJs

// If 404 Redirect to home
$routeProvider.otherwise( { redirectTo: '/'} );

This is also really helpful, so never goes to a missing page.

Answer 3

Route app.get('/index/dashboard', routes.dashboard); refers to http://hostname/index/dashboard whereas when('/dashboard', { ... }) refers to http://hostname/dashboard.

You should correct the route: app.get('/dashboard', routes.dashboard);

Answer 4

This article might help:

http://jjt.io/2013/11/16/angular-html5mode-using-yeoman-generator-angular/

In a nutshell:

npm install --save-dev connect-modrewrite

Gruntfile:

connect: {
  options: {
    // ...
    // Modrewrite rule, connect.static(path) for each path in target's base
    middleware: function (connect, options) {
      var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
      return [require('connect-modrewrite')(['!(\\..+)$ / [L]'])].concat(
        optBase.map(function(path){ return connect.static(path); }));
    }
  }
}