Console error "angular.min.js:107 RangeError: Maximum call stack size exceeded" [duplicate]

Question

I am getting following console error when the url is users/personal or users/:id:

angular.min.js:107 RangeError: Maximum call stack size exceeded.

Its running in loop and page hang.

But if I remove users form url its working fine. like /users My code is below

app.js file:-

var app = angular.module('angulardemo', ['ngRoute', 'ngCookies'])       .constant('API_URL', 'http://127.0.0.1:8001')       .config(function ($routeProvider, $locationProvider, $httpProvider) {
                            $httpProvider.defaults.headers.common = {'Content-Type' : 'application/json'};          $httpProvider.defaults.headers.post = {};           $httpProvider.defaults.headers.put = {};            $httpProvider.defaults.headers.patch = {};          $routeProvider          .when('/', {

                    templateUrl : "view/home.html",
                    controller : 'PagesController'          })          .when('/home', {

                    templateUrl : "view/home.html",
                    controller : 'PagesController'          })          .when('/about', {

                    templateUrl : "view/about.html",
                    controller : 'PagesController'          })          .when('/team', {

                    templateUrl : "view/team.html",
                    controller : 'PagesController'          })          .when('/work', {

                    templateUrl : "view/work.html",
                    controller : 'PagesController'          })          .when('/price', {

                    templateUrl : "view/price.html",
                    controller : 'PagesController'          })          .when('/contact', {

                    templateUrl : "view/contact.html",
                    controller : 'PagesController'          })
                .when('/register', {

                    controller: 'AuthController',
                    templateUrl: 'view/auth/register.html',
                })
                .when('/login', {

                    controller: 'AuthController',
                    templateUrl: 'view/auth/login.html',
                })          .when('/users/personal', {

                    controller: 'PersonalController',
                    templateUrl: 'view/users/personal.html',
                })
                .when('/users/edu', {

                    controller: 'EduController',
                    templateUrl: 'view/users/edu.html',
                })
                .when('/users/contact', {

                    controller: 'ContactController',
                    templateUrl: 'view/users/contact.html',
                })
                .when('/users/other', {

                    controller: 'OthersController',
                    templateUrl: 'view/users/other.html',
                })
                .when('/logout', {
                    // templateUrl: " ",
                    resolve : {
                        redirect: function ($routeParams, $location){

                            sessionStorage.removeItem('auth');
                            $location.path('/login').replace();
                        }
                    }
                })          .otherwise({
                    redirectTo: '/',
                }); 
                $locationProvider.html5Mode({
                    enabled: true,
                    requireBase: false          });
                $locationProvider.hashPrefix('');

            }).run(['$http', '$cookies', function($http, $cookies) {

                $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;        }]);

and my controller is personal.controller.js

app.controller('PersonalController', function ( $scope, AuthService, NavigationService, $http, $location, API_URL){

    $scope.navMenu = NavigationService.getNavigation();

});

and index file is index.html

<!DOCTYPE html>
<html ng-app="angulardemo">
    <head>
        <title>Angular Js | Demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://angulardemo.com/public/css/w3.css">
        <link rel="stylesheet" href="http://angulardemo.com/public/css/auth.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <div ng-controller="NavigationController" ng-if="matchNav == false">
            <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
            <!-- Bootstrap library -->
            <!--<link rel="stylesheet" href="http://angulardemo.com/node_modules/bootstrap/dist/css/bootstrap.min.css">-->
            <!--<script src="http://angulardemo.com/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
            <!-- Bootstrap library ends-->
        </div>
        <style>
        body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
        body, html {
            height: 100%;
            line-height: 1.8;
        }
        /* Full height image header */
        .bgimg-1 {
            background-position: center;
            background-size: cover;
            background-image: url("public/images/mac.jpg");
            min-height: 100%;
        }
        .w3-bar .w3-button {
            padding: 16px;
        }
        </style>
    </head>
<body>
    <div data-ng-view style="display: inline !important;"></div>
    <script src="http://angulardemo.com/Http/lib/angular/angular.min.js"></script>
    <script src="http://angulardemo.com/Http/lib/angular-route.min.js"></script>
    <script src="http://angulardemo.com/Http/lib/angular-cookies.js"></script>
    <script src="http://angulardemo.com/Http/app.js"></script>
    <script src="http://angulardemo.com/Http/factories/auth.factory.js"></script>
    <script src="http://angulardemo.com/Http/factories/flash.factory.js"></script>
    <script src="http://angulardemo.com/Http/services/auth.service.js"></script>
    <script src="http://angulardemo.com/Http/services/navigation.service.js"></script>
    <script src="http://angulardemo.com/Http/controllers/pages.controller.js"></script>
    <script src="http://angulardemo.com/Http/controllers/auth/auth.controller.js"></script>
    <script src="http://angulardemo.com/Http/controllers/navigation.controller.js"></script>
    <script src="http://angulardemo.com/Http/controllers/users/personal.controller.js"></script>
    <script src="http://angulardemo.com/Http/controllers/users/edu.controller.js"></script>
    <!--<script src="http://angulardemo.com/Http/controllers/users/contact.controller.js"></script>
    <script src="http://angulardemo.com/Http/controllers/users/others.controller.js"></script>-->
    <!-- Add Google Maps -->
    <script>
    // function myMap()
    // {
    //   myCenter=new google.maps.LatLng(41.878114, -87.629798);
    //   var mapOptions= {
    //     center:myCenter,
    //     zoom:12, scrollwheel: false, draggable: false,
    //     mapTypeId:google.maps.MapTypeId.ROADMAP
    //   };
    //   var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);

    //   var marker = new google.maps.Marker({
    //     position: myCenter,
    //   });
    //   marker.setMap(map);
    // }
    // Modal Image Gallery
    function onClick(element) {
      document.getElementById("img01").src = element.src;
      document.getElementById("modal01").style.display = "block";
      var captionText = document.getElementById("caption");
      captionText.innerHTML = element.alt;
    }


    // Toggle between showing and hiding the sidebar when clicking the menu icon
    var mySidebar = document.getElementById("mySidebar");

    function w3_open() {
        if (mySidebar.style.display === 'block') {
            mySidebar.style.display = 'none';
        } else {
            mySidebar.style.display = 'block';
        }
    }

    // Close the sidebar with the close button
    function w3_close() {
        mySidebar.style.display = "none";
    }
    </script>
    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script> -->
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp-->


</body>
</html>

and directory structure is

enter image description here

and NavigationService.js file:

app.service('NavigationService', function (AuthService, $location) {
    /**
     * 
     * Get All the navigation
     */
    this.getNavigation = function (){

        var navMenu = [{title : "ABOUT", url : '/about', show : true}, {title : "TEAM", url : '/team', show : true}, {title : "WORK", url : '/work', show : true}, {title : "PRICING", url : '/price', show : true}, {title : 'CONTACT', url : '/contact', show : true}, ];

        if(AuthService.checkLogin()){

            navMenu.push({title : 'LOGOUT', url : '/logout', show : AuthService.checkLogin()});
        }
        else{

            navMenu.push({title : 'LOGIN', url : '/login', show : !AuthService.checkLogin()}, {title : 'REGISTER', url : '/register', show : !AuthService.checkLogin()});
        }

        return navMenu;
    }

    /**
     * 
     * Get Navigation title
     */
    this.getNavTitle = function (){

        var nav = [];
        angular.forEach(this.getNavigation(), function(navigations, key) {

            nav.push(navigations.title);
        });

        return nav;
    }

    /**
     * 
     * 
     */
    this.matchNavigation = function (){

        var route = $location.url().replace('/','');
        if( this.getNavTitle().indexOf(route) === -1 ) return true;
        else return false;
    }
});

Any suggestions?

Please see the directory structure link below. enter image description here

No sir, I have uploaded the code you can check. I am frustrated from last 3 days. Please give anyone the solution — Sanjay Samant
– Sanjay Samant, Commented May 14, 2017 at 15:31
please change to angular.js instead of angular.min.js in order to get a real error message that can be evaluated. Post the new error. — Claies
– Claies, Commented May 14, 2017 at 15:55
I have changed it to angular.js now console error is "angular.js:14525 RangeError: Maximum call stack size exceeded" — Sanjay Samant
– Sanjay Samant, Commented May 15, 2017 at 6:17
I know the code got marked as a duplicate, but maybe I can offer an idea anyway.... $location.url() navigates the page, it doesn't just return the URL. — Claies
– Claies, Commented May 15, 2017 at 13:43
Thanks Claies for your help. I have resolved the issue, Actually I did very silly error. It was in templateUrl and include partials. I did not use "/view/.." instead of "view/.../" and same in including partials. — Sanjay Samant
– Sanjay Samant, Commented May 16, 2017 at 6:25

Amadou Beye · Accepted Answer · 2017-05-14 15:37:34Z

0

This happens sometimes when an included file is not found. Make sure the file 'view/users/personal.html' and the template of the route 'users/:id' exist and are in the right location

answered May 14, 2017 at 15:37

Amadou Beye

2,8583 gold badges21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sanjay Samant Over a year ago

Please see the updated directory structure in above linked image

Collectives™ on Stack Overflow

Console error "angular.min.js:107 RangeError: Maximum call stack size exceeded" [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related