Maximum call stack size exceeded with Node + Express + Angular + Angular-route

Question

I am starting a SPA with the following stack:

Back-end:
- NodeJS + Express
Front-end:
- Angular + Angular-route.
- Twitter Bootstrap
- Underscore

I have follow many tutorial with similar stack, and my files look like:

package.json

{
  "name": "webportal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "pdonaire",
  "license": "ISC",
  "dependencies" : {
    "express"    : "~4.7.2",
    "morgan"     : "~1.2.2",
    "method-override": "~2.1.2",
    "nodemon": "~1.7.3",
    "bootstrap": "~3.3.5",
    "angular": "~1.4.7",
    "angular-route": "~1.4.7",
    "underscore": "~1.8.3",
    "jquery": "~2.1.4"
  }
}

index.js

var express = require('express');

var app = express();

app.use('/node_modules', express.static(__dirname + '/node_modules'));
app.use('/js', express.static(__dirname + '/public/assets/js'));

var indexRoute = function(req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
};

app.get('/', indexRoute);
app.get('*', indexRoute);


var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Webportal listening at http://%s:%s', host, port);
});

index.html

<!DOCTYPE html>
<html lang="en" ng-app="WebPortal">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/node_modules/angular/angular.js"></script>
    <script src="/node_modules/angular-route/angular-route.js"></script>
    <title>WebPortal</title>
    <link href='/node_modules/bootstrap/dist/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<div class="container-fluid">
    <div ng-view></div>
</div>
</body>
<script src="/js/app.js"></script>
<script src="/js/contact.js"></script>
</html>

app.js

var app = angular.module('WebPortal', ['ngRoute']);

app.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/contacts', {
                templateUrl: 'contact.html',
                controller: "ContactCtrl"
            }).
            otherwise({
                redirectTo: "/contacts"
            });
    }
]);

contact.js

app.controller('ContactCtrl', function ($scope, $http, $location) {
});

contact.html

<h1>CONTACT</h1>

Ok. Now I open a CMD and run node index.js. All works and when I open a Chrome tab with http://localhost:3000 I get the following error in Chrome Developer Tools:

RangeError: Maximum call stack size exceeded at invokeLinkFn (http://localhost:3000/node_modules/angular/angular.js:8791:30)
at nodeLinkFn (http://localhost:3000/node_modules/angular/angular.js:8289:11)
at compositeLinkFn (http://localhost:3000/node_modules/angular/angular.js:7680:13)
at compositeLinkFn (http://localhost:3000/node_modules/angular/angular.js:7684:13)
at publicLinkFn (http://localhost:3000/node_modules/angular/angular.js:7555:30)
at link (http://localhost:3000/node_modules/angular-route/angular-route.js:985:7)
at invokeLinkFn (http://localhost:3000/node_modules/angular/angular.js:8789:9)
at nodeLinkFn (http://localhost:3000/node_modules/angular/angular.js:8289:11)
at compositeLinkFn (http://localhost:3000/node_modules/angular/angular.js:7680:13)
at publicLinkFn (http://localhost:3000/node_modules/angular/angular.js:7555:30) <div ng-view="" class="ng-scope">(anonymous function) @ angular.js:12477(anonymous function) @ angular.js:9246invokeLinkFn @ angular.js:8791nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680publicLinkFn @ angular.js:7555boundTranscludeFn @ angular.js:7699controllersBoundTransclude @ angular.js:8316update @ angular-route.js:935link @ angular-route.js:900invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289compositeLinkFn @ angular.js:7680compositeLinkFn @ angular.js:7684publicLinkFn @ angular.js:7555link @ angular-route.js:985invokeLinkFn @ angular.js:8789nodeLinkFn @ angular.js:8289

angular.js:12477 RangeError: Maximum call stack size exceeded
at Object.ASTCompiler.compile (http://localhost:3000/node_modules/angular/angular.js:13310:10)
at Parser.parse (http://localhost:3000/node_modules/angular/angular.js:14146:29)
at $parse (http://localhost:3000/node_modules/angular/angular.js:14248:39)
at Scope.$eval (http://localhost:3000/node_modules/angular/angular.js:15989:16)
at update (http://localhost:3000/node_modules/angular-route/angular-route.js:948:26)
at link (http://localhost:3000/node_modules/angular-route/angular-route.js:900:9)
at invokeLinkFn (http://localhost:3000/node_modules/angular/angular.js:8789:9)
at nodeLinkFn (http://localhost:3000/node_modules/angular/angular.js:8289:11)
at compositeLinkFn (http://localhost:3000/node_modules/angular/angular.js:7680:13)
at compositeLinkFn (http://localhost:3000/node_modules/angular/angular.js:7684:13) <!-- ngView:  -->

Anyone knows what's happening? I don't see naything strange....

Thanks!!!

EDIT 1: Added contact.html code

EDIT 2: Added screenshot with Chrome Developer Tools console tab:

*EDIT 3: Added screenshot with Chrome Developer Tools Network tab:

hsz · Accepted Answer · 2015-10-26 11:41:34Z

2

This error appears very often when you don't have a template related to the route that you're calling.

Simply add contact.html in your project.

answered Oct 26, 2015 at 11:41

hsz

153k63 gold badges268 silver badges320 bronze badges

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

4 Comments

Pablo D Over a year ago

I have contact.html in my project. It only shows a title <h1>CONTACT</h1> for test it

Pablo D Over a year ago

Nope... I've added a screenshot where you can see the error :)

hsz Over a year ago

And to be 100% sure - in Networking tab there are no errors ?

Pablo D Over a year ago

Everything is fine... I have added another screenshot

Pablo D · Accepted Answer · 2015-10-27 07:30:50Z

0

Well.. It looks that the problem is not a strange issue. The problem is that Angular does not find .html files, so it begins to loop (cause otherwise clause).

Mental note: Don't write otherwise clause.

answered Oct 27, 2015 at 7:30

Pablo D

3932 gold badges7 silver badges24 bronze badges

Comments

Bigtrizzy · Accepted Answer · 2015-10-31 07:15:35Z

0

What is your template engine? I had a similar issue with handlebars (.hbs) where the layout.hbs was being called in an infinite loop.

answered Oct 31, 2015 at 7:15

Bigtrizzy

1032 silver badges8 bronze badges

3 Comments

Pablo D Over a year ago

I don't use any template engine. Is HTML from scratch :D. The problem was related with angular routing. Angular didn't find the .html file, so it redirects to default URL. There, it did not find the .html too, so it redirects to default URL, ..... An infinite loop

Bigtrizzy Over a year ago

yeah, I had the same problem using .hbs, it was a biache to debug.

korwalskiy Over a year ago

The issue here is the express.static directive, it kind of mess up the dir root reference for the entire project......You might want to create a valid express.static directive for your view path.

Collectives™ on Stack Overflow

Maximum call stack size exceeded with Node + Express + Angular + Angular-route

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related