Express + Angular routing causing infinite loop + crash

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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="/" rel="nofollow noreferrer noopener"></base>

to your <head>.

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply