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

PabloD
October 26, 2015
282 views
3 votes
3 Answers

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:

Answers

Chosen as BEST ANSWER
- PabloD
- October 27, 2015 at 8:30 am
- 0 votes
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.

(Edit)

- hsz
- October 26, 2015 at 12:41 pm
- 0 votes
0
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.

Login or Signup to reply.

- Bigtrizzy
- October 31, 2015 at 8:15 am
- 0 votes
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.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers