While using AngularJS v1.5.9 and $routeParams, I am encountering repetitive errors in the console of my Chrome browser.
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">
I seem to be following this example closely, but I can't figure out what's causing these errors. Here is a snippet from my 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;
});
UPDATE
The error persists when navigating to example.com/match/id/123.
When inspecting in Chrome, it appears that the matchController is continuously being entered, although the $routeParams value is correct. This behavior perplexes me.
The file structure is straightforward, with all JS contained in one file named app.js as shown above. There are only two configured routes and two static templates for header, nav, and footer without controllers.