CODEWITHSUNDEEP
javascriptangularjsruntime-errorangularjs-digest
Praneet Dixit
Praneet Dixit

Reputation: 1425

$rootScope:infdig 10 $digest() iterations reached. Aborting! - AngularJS

I am getting following errors in my AngularJS app -

angular.js:15536 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
https://errors.angularjs.org/1.7.5/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.js:138
    at Scope.$digest (angular.js:19143)
    at Scope.$apply (angular.js:19463)
    at bootstrapApply (angular.js:1945)
    at Object.invoke (angular.js:5122)
    at doBootstrap (angular.js:1943)
    at bootstrap (angular.js:1963)
    at angularInit (angular.js:1848)
    at HTMLDocument.<anonymous> (angular.js:36216)
    at e (jquery-3.5.1.min.js:2)
(anonymous) @ angular.js:15536
angular.js:19143 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
https://errors.angularjs.org/1.7.5/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.js:138
    at Scope.$digest (angular.js:19143)
    at angular.js:19395
    at TaskTracker.completeTask (angular.js:21194)
    at angular.js:6790
jquery-3.5.1.min.js:2 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
https://errors.angularjs.org/1.7.5/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.js:138
    at Scope.$digest (angular.js:19143)
    at Scope.$apply (angular.js:19463)
    at bootstrapApply (angular.js:1945)
    at Object.invoke (angular.js:5122)
    at doBootstrap (angular.js:1943)
    at bootstrap (angular.js:1963)
    at angularInit (angular.js:1848)
    at HTMLDocument.<anonymous> (angular.js:36216)
    at e (jquery-3.5.1.min.js:2)

I cannot figure out what is causing this error. I have not written much angularjs code except setting up routes through ui-router -

'use strict';

// Declare app level module which depends on views, and core components
angular.module('d2d', [
    'ui.router',
    'd2d.controllers'
]);

angular.module("d2d").config(["$stateProvider", "$locationProvider", "$urlServiceProvider", function($stateProvider, $locationProvider, $urlServiceProvider){
   $stateProvider.state("home",{
       url: "/home",
       templateUrl: "/Views/home.html",
       controller: "HomeController"
   }).state("contact",{
       url: "/contact",
       templateUrl: "/Views/contact.html",
       controller: "ContactController"
   }).state("allServices",{
       url: "/services",
       templateUrl: "/Views/allServices.html",
       controller: "ServicesController"
   }).state("singleService",{
       url: "/services/:serviceName",
       templateUrl: "/Views/singleService.html",
       controller: "IndividualController"
   });

   $locationProvider.html5Mode({
       enabled: true,
       requireBase: false
   });

   $urlServiceProvider.rules.otherwise("home");
}]);

angular.module("d2d").run(["$state", function($state){
    $state.go("home");
}]);

and controllers -

'use strict';

angular.module("d2d.controllers",[]);

angular.module("d2d.controllers").controller("HomeController", ["$scope", function ($scope) {

}]).controller("ContactController", ["$scope", function ($scope) {

}]).controller("ServicesController", ["$scope", function ($scope) {

}]).controller("IndividualController", ["$scope", function ($scope) {

}]);

The routes are working just fine and I cannot find and error till now.

I have found many similar questions on SO but the cause for the error was different than mine in those questions.

EDIT -- Here is my index.html file in case the issue is with it -

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="d2d" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="d2d" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="d2d" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="d2d" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
  
  <!--Some html here. No models, no directives, just html -->

  <ui-view></ui-view>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
  <script src="JS/controllers.js"></script>
</body>
</html>

Upvotes: 0

Views: 270

Answers (0)

Related Questions