AngularJS and ExpressJS Routing issue?

Problem

I am using Angular, express, nodeJS for web application development.

Anuglar code:

'use strict';
//
 Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]).config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}]);;


angular.module('modelDemo', []).
config(function ($routeProvider) {
    $routeProvider.
    when('/', {
        controller: 'AuthorListCtrl',
        templateUrl: 'partials/list.html'
    });
     $routeProvider.
    when('/view1', {
        controller: 'MyCtrl1',
        templateUrl: 'partials/partial1.html'
    });
   $routeProvider.otherwise({redirectTo: '/view1'})
});

var app = angular.module('app', ['myApp', 'modelDemo']);

Express code

// all environments
app.set('port', process.env.PORT || 2000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);

app.get('/', wine.index);
app.get('/partials/:name', wine.partials);
app.get('/wines', wine.findAll);
// / app.get('/view1', wine.index);
app.get('/wines/:id', wine.findById);
app.post('/wines', wine.addWine);
app.put('/wines/:id', wine.updateWine);
app.delete('/wines/:id', wine.deleteWine);
app.get('/view1', wine.partials);
//app.get('/view1/:name', wine.partials);

2)

exports.index = function(req, res){
   console.log("request url---"+req.url);
   res.render('partials/' + req.params.name);
};

exports.partials = function(req, res) {
   console.log("request url---"+req.url);
   console.log(req.params.name);
   res.render('partials/' + req.params.name);
};

Project folder Structure: Folder stru

When I tried to access this application by using following url, http://www.domain:2000/view1

i am getting following error,

Error: Failed to lookup view "partials/undefined" at Function.app.render (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\application.js:494:17) at ServerResponse.res.render (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\response.js:756:7) at exports.partials (d:\era\startup\learnnod\restfull_angular2\routes\wines.js:104:9) at callbacks (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:161:37) at param (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:135:11) at pass (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:142:5) at Router._dispatch (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:170:5) at Object.router (d:\era\startup\learnnod\restfull_angular2\node_modules\express\lib\router\index.js:33:10) at next (d:\era\startup\learnnod\restfull_angular2\node_modules\express\node_modules\connect\lib\proto.js:190:15) at resume (d:\era\startup\learnnod\restfull_angular2\node_modules\express\node_modules\connect\lib\middleware\static.js:60:7)

Please let me know if you need more info on it

Problem courtesy of: niran

Solution

The problem is that you are trying to handle the routes in both your angular code and your express code. In order to get it to work as expected, you need to direct all non-partial/non-api routes to your index.html file.

Try doing something like this:

wine.js (your express route file)

exports.index = function(req, res) {
    res.sendfile(__dirname + "/public/index.html"); // updated to reflect dir structure
};

app.js (your express app file)

...
// make this your last route and remove your '/view1' route
app.get('*', wine.index);
...
Solution courtesy of: Brian Lewis

Discussion

In your wine.js you are using parameter name, but in your routes you have commented the part.

app.get('/view1', wine.partials);
//app.get('/view1/:name', wine.partials);

Since you have not specified the param :name in route, when you try to access it with req.params.name it gives undefined. And you look for a file undefined that does not exist.

Error: Failed to lookup view "partials/undefined" at Function.app.render

You probably want res.render('partials/view1');

Discussion courtesy of: user568109

This recipe can be found in it's original form on Stack Over Flow.