Partial Page rendering issue in Mean Stack application

Question

I am learning Mean Stack by going through the Pluralsight tutorials. I am struck at some point in rendering partials for 2 days.

You can refer below image for getting my folder structure.

server.js

/**
 * Created by nyaconcepts on 4/10/2014.
 */
var express=require('express');
var env=process.env.NODE_ENV=process.env.NODE_ENV||'development';
var app=express();
var config=require('./server/config/config')[env];

require('./server/config/express')(app,config);
require('./server/config/mongoose')(config);
require('./server/config/routes')(app);

app.listen(config.port);
console.log('Listening on port'+config.port+'---');

express.js

var express=require('express'),
    bodyParser = require('body-parser'),
    morgan  = require('morgan'),
    stylus=require('stylus');

module.exports=function(app,config) {
    function compile(str,path){
        return stylus(str).set('filename',path);
    }

        app.set('views',config.rootPath+'server/views');
        app.set('view engine','jade');
        app.use(morgan('dev'));
        app.use(bodyParser());
        app.use(stylus.middleware({
                src:config.rootPath+'/public',
                compile:compile
            }
        ));
        app.use(express.static(config.rootPath+'/public'));


}

routes.js

module.exports=function(app){
    app.get('/partials/*',function(req,res){
        console.log("req ="+req +"and res="+res);
        res.render('../../public/app/'+ req.params);
    });

    app.get('*',function(req,res){
        res.render('index');
    });
}

app.js

angular.module('app',['ngResource','ngRoute']);

angular.module('app').config(function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/',{ templateUrl:'/partials/main/main/',controllers:'mvMainCtrl'});
});

config.js

var path=require('path');
var rootPath=path.normalize(__dirname + '/../../' );

module.exports={
    development:{
        db:'mongodb://localhost/multivision',
        rootPath:rootPath,
        port:process.env.PORT || 3030
    },
    production:{
        db:'****',
        rootPath:rootPath,
        port:process.env.PORT || 80
    }
}

main.jade

//h1 This is a partial
//h2{{myVar}
.container
    .jumbotron
        h1 MultiVision
        p My first mean stack application

    .row
        .col-md-6
            div(ng-include="'/partials/main/featured-courses'")
        .col-md-6
            div(ng-include="'/partials/main/new-courses'")

The error that i am getting is

Error: Failed to lookup view "../../public/app/[object Object]" in views directory "C:\Users\nyaconcepts\WebstormProjects\MultiVision\server/views"
    at Function.app.render (C:\Users\nyaconcepts\WebstormProjects\MultiVision\node_modules\express\lib\application.js:491:17)
    at ServerResponse.res.render (C:\Users\nyaconcepts\WebstormProjects\MultiVision\node_modules\express\lib\response.js:777:7)
    at Object.handle (C:\Users\nyaconcepts\WebstormProjects\MultiVision\server\config\routes.js:5:13)
    at next_layer (C:\Users\nyaconcepts\WebstormProjects\MultiVision\node_modules\express\lib\router\route.js:103:13)
    at Route.dispatch (C:\Users\nyaconcepts\WebstormProjects\MultiVision\node_modules\express\lib\router\route.js:107:5)
    at c (C:\Users\nyaconcepts\WebstormProjects\MultiVision\node_modules\express\lib\router\index.js:195:24)
    at Function.proto.process_params (C:\Users\nyaconcepts\WebstormProjects\MultiVision\node_modules\express\lib\router\index.js:251:12)
    at next (C:\Users\nyaconcepts\WebstormProjects\MultiVision\node_modules\express\lib\router\index.js:189:19)
    at SendStream.error (C:\Users\nyaconcepts\WebstormProjects\MultiVision\node_modules\express\node_modules\serve-static\index.js:74:37)
    at SendStream.EventEmitter.emit (events.js:95:17)

Answer 1

You are trying to access view ../../public/app/[object Object], which is not a valid path. The problem is within res.render('../../public/app/'+ req.params);, req.params is an object, you need to extract a value from it which includes partial name.

this snippet from generator-angular-fullstack:

/**
 * Send partial, or 404 if it doesn't exist
 */
exports.partials = function(req, res) {
  var stripped = req.url.split('.')[0];
  var requestedView = path.join('./', stripped);
  res.render(requestedView, function(err, html) {
    if(err) {
      console.log("Error rendering partial '" + requestedView + "'\n", err);
      res.status(404);
      res.send(404);
    } else {
      res.send(html);
    }
  });
};

Answer 2

I faced the same problem this what solves the problem for me

    // Serve jade tempates from partials
app.get('/partials/*', function(req, res){
    console.log(req.params);
    res.render('../../public/app/' + req.params[0]);
});

Thanks to @Roman for the tip to understand what's going on :)

Answer 3

this works fine

 // Serve jade tempates from partials
app.get('/partials/*', function(req, res){
    console.log(req.params);
    res.render('../../public/app/' + req.params[0]);
});