Node + Express + Angular + Angular-route 超出最大调用堆栈大小

Question

我正在使用以下堆栈启动 SPA：

后端：
- NodeJS + Express
前端：
- Angular + Angular-路线.
- 推特Bootstrap
- 下划线

我遵循了很多具有类似堆栈的教程，我的文件如下所示：

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>

好的。现在我打开 CMD 和运行 node index.js。一切正常，当我使用 http://localhost:3000 打开 Chrome 选项卡时，我在 Chrome 开发人员工具中收到以下错误：

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:  -->

有人知道发生了什么事吗？我看不出有什么奇怪的....

谢谢！！！

编辑 1：添加了 contact.html 代码

编辑 2：添加了带有 Chrome 开发人员工具控制台选项卡的屏幕截图：

*编辑 3：添加了带有 Chrome 开发者工具网络选项卡的屏幕截图：

Answer 1

当您没有与您调用的路由相关的模板时，此错误经常出现。

只需在您的项目中添加 contact.html。

Answer 2

嗯..看来这个问题不是什么奇怪的问题。问题是 Angular 没有找到 .html 文件，所以它开始循环（因为 otherwise 子句）。

注意事项：不要写 otherwise 子句。

Answer 3

你的模板引擎是什么？我在车把 (.hbs) 中遇到了类似的问题，其中 layout.hbs 在无限循环中被调用。

Node + Express + Angular + Angular-route 超出最大调用堆栈大小

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

javascript

node.js

express

angularjs

angular-routing