node.js/angular.js - Cannot GET - node.js

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 /dashboard
If I create a link to the same url it works fine.
If I then refresh that page I get the same error again.
Below is my node.js route
app.js
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, stats = require('./routes/stats')
, tests = require('./routes/test')
, http = require('http')
, util = require('util')
, path = require('path');
var app = module.exports = express();
app.configure(function(){
/*
* Configuration
*
*/
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
/*
* Middleware definitions
*
*/
app.use(express.favicon());
app.use(express.logger('dev'));
/*
* Error handling middleware
*/
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('shhhhhhhh, super secret'));
app.use(app.router);
// serves up dynamic css files
app.use(require('stylus').middleware(__dirname + '/public'));
app.use(require('less-middleware')({ src: __dirname + '/public' }));
// serves a static path
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
/*
* Endpoints
*/
app.get('/', routes.index);
app.get('/test', tests.get);
app.post('/test', tests.post);
app.options('/test', tests.options);
app.get('/stats/sends', stats.sends.get);
app.get('/stats/events', stats.events.get);
app.get('/stats/attempts', stats.attempts.get);
app.get('/stats/errors', stats.errors.get);
app.get('/stats/mquad', stats.mquad.get);
app.get('/partials/:name', routes.partials);
app.get('/index/landing', routes.landing);
app.get('/index/dashboard', routes.dashboard);
console.log('Env: ' + app.settings.env);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
routes/index.js
exports.dashboard = function(req, res){
res.render('dashboard');
};
Angular route
'use strict';
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/landing',
controller: LandingCtrl
}).
when('/dashboard', {
templateUrl: 'partials/dashboard',
controller: DashboardCtrl
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);

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

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

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

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.