Express + Angular routing causing infinite loop + crash

Question

I'm working on a Node app using Express as well as Angular. I'm using Angular for routing and have my routes setup like so:

app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
    templateUrl: '/partials/main'
    //controller: 'IndexController'
}).when('/discover', {
    templateUrl: '/partials/discover'
}).when('/user/home', {  //HERES THE PROBLEM CHILD!!!!!
    templateUrl: '/partials/user/home'
}).otherwise({
    redirectTo: '/'
});
}]).config(['$locationProvider', function ($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

Now, whenever I try and call /user/home -- The page goes into an infinite loop and keeps reloading the controller. I can see in the node console that the page was called from partials/user/home which definitely contains a Jade file. I've checked other posts, most of them are solved with ass the / in the beginning of the partials path, that didn't help here. The page loads fine if I transfer home.jade into the /partials directory with no sub directory. Any ideas?

Update: It seems the infinite loop happens anytime I try to load a partial in any sub-directory of partials.

Per request:

Node -- App.js:

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

app.get('/partials/:name', routes.partials);
app.get('*', routes.index);

And routes/index.js

exports.index = function(req, res) {
res.render('index', { title: 'Open Innovation Station' });
}

exports.partials = function(req, res) {
res.render('partials/' + req.params.name);
}

Could you add your Node config?

Will M
– Will M

2013-09-01 00:14:28 +00:00
Commented Sep 1, 2013 at 0:14 — Will M
– Will M, Commented Sep 1, 2013 at 0:14

hexacyanide · Accepted Answer · 2014-03-11 14:24:29Z

12

Using html5Mode(true), you will have to concern yourself with any relative paths -- which you are using for your partials. The recursion in your case, I believe, could have been resolved by adding:

<base href="/"></base>

to your <head>.

edited Mar 11, 2014 at 14:24

hexacyanide

92.4k31 gold badges168 silver badges162 bronze badges

answered Oct 23, 2013 at 23:16

wizardwerdna

9567 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Petrogad Over a year ago

sure did; thanks for this.. Silly mistake on my end for not having relative paths then wondering why things were including infinite.

AlexMA Over a year ago

I can't believe that html5Mode would alter a templateUrl that is specified with a slash in front of it. Would have expected that to be an absolute path. especially since the docs say so.

GordyD · Accepted Answer · 2013-09-01 03:07:45Z

2

The routing rule that you have specified for partials will not match any requests to subdirectories within the partials folder e.g. /partials/folder/file. The routing path matcher treats / as a delimiter between variables. Therefore in order to support having sub folders within your partials directory you will have to add another rule to your app and define a function to handle rendering this template. This is shown below:

app.js

app.get('/partials/:directory/:file', routes.subpartials);

routes/index.js

exports.subpartials = function (req, res) {
  var file = req.params.file,
      directory = req.params.directory;
  res.render('partials/' + directory + '/' + file);
};

answered Sep 1, 2013 at 3:07

GordyD

5,10328 silver badges30 bronze badges

4 Comments

tymeJV Over a year ago

Thx for the response gordy. Im away from my machine for the night but will try in the AM.

TheSharpieOne Over a year ago

It's best to use a catch all * in your partial route ('/partials/*'), then use req.params[0] to get the file that was requested. If the file directories are the same, you can just render the param.

tymeJV Over a year ago

Awesome solution. Just now getting into Angular routing, was recently using Express to handle everything. This sub-directory had me at a loss for a bit. I tried something like this earlier, app.get('/partials/user/:file' but I must've missed something. Thanks again!

dantheta Over a year ago

To have a catch all partials work nicely with nested partials without any explicitly referencing nested directory, I will do this app.get('/partials/*', routes.subpartials); and render this way res.render('partials/' + req.params); in the subpartials function.

Collectives™ on Stack Overflow

Express + Angular routing causing infinite loop + crash

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related