15

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

4 Answers 4

12

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
Sign up to request clarification or add additional context in comments.

Comments

8

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

Comments

4

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

6 Comments

Thanks for the reply. However, I get this 500 Express 500 Error: Failed to lookup view "dashboard" when I use the route app.get('/dashboard', routes.dashboard);
Try when('/index/dashboard', { ... }). You are using html5Mode and all your app routes should be equal to the server routes.
app.get('/index/dashboard', routes.dashboard) on server and when('/index/dashboard', { ... }) on client produce a 500??? I don understand… If you navigate in brawser to http://hostname/index/dashboard you get a 500?
oh, wait it kind of works. Sorry, now I can't link to it but I can directly to that url but my layout template isn't working. I'll update when I get totally working and credit you. Thanks!
This is still totally hosed. Thanks for you help but there is definitely a deeper issue with this. I'm not really sure whats going on but there clearly is a some problem between node routes and angular routes.
|
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.

2 Comments

From this res.sendFile(path.join(__dirname+'/public/index.html')); what is path
@Kartheeks path is const path = require('path');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.