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

我开始一个SPA，有以下的堆栈：

  • 后端：
    • NodeJS + Express
  • 前端：
    • Angular + Angular-route。
    • Twitter 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开发人员工具控制台选项卡的屏幕截图：

截图1

*编辑3：添加与Chrome开发人员工具networking选项卡的屏幕截图：

截图2

如果没有与您要呼叫的路由相关的模板，则会出现此错误。

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

那么看起来这个问题不是一个奇怪的问题。 问题是Angular没有find.html文件，所以它开始循环（导致否则子句）。

心理注意：不要另外写条款。

什么是你的模板引擎？ 我有一个类似的问题，在无限循环中调用layout.hbs的句柄（.hbs）。

Interesting Posts

如何用Node.js（express.js）开发多租户应用程序？

Node JS + Express：在主视图中渲染子视图

在Node.js中的Mongodb / Mongoose 通过嵌套文档的id查找

Express不返回所有查询string参数

帕格 – 编译后错误的嵌套 – 包括vs扩展

Socket.io 1.0 + express 4.2 =没有套接字连接

如何使用中间件在进入每条路线之前检查授权？

用Mongoose从文档中删除一个数组元素

NodeJS ExpressJS Multer文件扩展名为小写

res.json不能在callback函数里面工作