Angularjs $routeParams 导致 RangeError：超出最大调用堆栈大小答案

【问题标题】：Angularjs $routeParams causing RangeError: Maximum call stack size exceededAngularjs $routeParams 导致 RangeError：超出最大调用堆栈大小
【发布时间】：2016-12-08 00:35:07
【问题描述】：

我正在使用 AngularJS v1.5.9 并使用 $routeParams 我在我的 chrome 控制台上一遍又一遍地收到以下错误。

RangeError: Maximum call stack size exceeded
    at la (angular.js:10097)
    at p (angular.js:9492)
    at g (angular.js:8757)
    at angular.js:8637
    at Object.link (angular-route.js:1065)
    at angular.js:1259
    at la (angular.js:10095)
    at p (angular.js:9492)
    at g (angular.js:8757)
    at angular.js:8637

RangeError: Maximum call stack size exceeded
    at Object.error (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:119:129)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:91:305
    at la (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:82:112)
    at p (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:67:274)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:59:252)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:58:394
    at Object.link (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.js:1065:7)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:16:71
    at la (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:82:90)
    at p (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:67:274) <main ng-view="" class="ng-scope">

我不确定我做错了什么，我非常关注this example。这是我的app.js：

var app = angular.module('app', ['ngRoute']);  // TODO: 'ngAnimate', 'ui.bootstrap' 

app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){

    $routeProvider
        .when('/', {
            templateUrl: '/app/static/home.html',
            controller: 'mainController as mainCtrl'

        })
        .when('/match/id/:id', {
            templateUrl: 'components/match/matchView.html',
            controller: 'matchController'
        });

    // use the HTML5 History API
    $locationProvider.html5Mode(true);
}]);

app.controller('mainController', [function(){
    var mainCtrl = this;
    mainCtrl.test = 'testing mainController';
}]);

 app.controller('matchController', function ($scope, $routeParams) {
    // var matchCtrl = this;
    $scope.name = 'matchController';
    $scope.params = $routeParams;
 });

更新

当我转到 example.com/match/id/123 时出现错误。

当我在 chrome 检查器中放置断点时，我看到它一遍又一遍地进入matchController，但我不知道为什么？当它在断点处停止时，我可以看到 $routeParams 具有正确的值。

文件结构非常简单，所有的 JS 都在一个文件 app.js 中，如上所述。到目前为止，我只配置了两条路线。还有两个用于页眉、导航和页脚的静态模板，但没有控制器。

【问题讨论】：

您能否提供更多信息，例如您何时收到错误、项目的文件结构以及何时记录错误？ @圣
@YaserAdelMehraban，刚刚更新了问题，感谢您查看
我刚刚发布了一个答案，这似乎是可能的原因。 @圣
你在什么样的服务器上运行这个？如果服务器不了解如何处理角度 HTML5 模式，通常会发生此行为。

标签： javascript angularjs angular-routing

【解决方案1】：

从您的路线设置中删除多余的 id，看看是否有帮助：

.when('/match/:id', {
     templateUrl: '/app/components/match/matchView.html',
     controller: 'matchController'
});

【讨论】：

【解决方案2】：

我知道了，我没有完整的templateURL 路径集

templateUrl: 'components/match/matchView.html',

到

templateUrl: '/app/components/match/matchView.html',

【讨论】：