ng-include recursively including whole index.html, and giving error "10 $digest() iterations reached"

Question

I am having the following problem with ng-include. What am I missing? Anybody had a similar issue?

The template test.html is never included.
<h1>Testing</h1> is repeated many, many times.
I get the following
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Inspecting the html elements in the browser, shows that the whole index.html is recursively included by ng-include.

What I am doing is a simple test with a stripped down index.html

index.html

<html>
  <head>
    <link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/src/css/app.css" rel="stylesheet">
    <script src="static/bower-components/angular/angular.js"></script>
    <script src="static/bower-components/angular-route/angular-route.js"></script>
    <script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 
    <script src="static/src/js/app.js"></script>
    <script src="static/src/js/services.js"></script>
    <script src="static/src/js/controllers.js"></script>
    <script src="static/src/js/filters.js"></script>
    <script src="static/src/js/directives.js"></script>
  </head>

  <body  ng-app="myApp">
    <h1> Testing </h1>
    <div ng-include="'test.html'"> </div>
  </body>

</html>

test.html

<h3> included template </h3>

In the browser I get:

Testing

....

Testing

Inspecting the html in the browser, shows the recursive inclusion of index.html:

<body ng-app="myApp" class="ng-scope">

<h1> Testing </h1>

<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">

<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
<link href="static/src/css/app.css" rel="stylesheet" class="ng-scope">
<script src="static/bower-components/angular/angular.js" class="ng-scope"></script>
<script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"></script> 
<script src="static/src/js/app.js" class="ng-scope"></script>
<script src="static/src/js/services.js" class="ng-scope"></script>
<script src="static/src/js/controllers.js" class="ng-scope"></script>
<script src="static/src/js/filters.js" class="ng-scope"></script>
<script src="static/src/js/directives.js" class="ng-scope"></script>


<h1 class="ng-scope"> Testing </h1>

<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">

<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
<link href="static/src/css/app.css" rel="stylesheet" class="ng-scope">
<script src="static/bower-components/angular/angular.js" class="ng-scope"></script>
<script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"></script> 
<script src="static/src/js/app.js" class="ng-scope"></script>
<script src="static/src/js/services.js" class="ng-scope"></script>
<script src="static/src/js/controllers.js" class="ng-scope"></script>
<script src="static/src/js/filters.js" class="ng-scope"></script>
<script src="static/src/js/directives.js" class="ng-scope"></script>

<h1 class="ng-scope"> Testing </h1>

<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">

<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
<link href="static/src/css/app.css" rel="stylesheet" class="ng-scope">
<script src="static/bower-components/angular/angular.js" class="ng-scope"></script>
<script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"></script> 
<script src="static/src/js/app.js" class="ng-scope"></script>
<script src="static/src/js/services.js" class="ng-scope"></script>
<script src="static/src/js/controllers.js" class="ng-scope"></script>
<script src="static/src/js/filters.js" class="ng-scope"></script>
<script src="static/src/js/directives.js" class="ng-scope"></script>

<h1 class="ng-scope"> Testing </h1>

<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">

<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">

    .......
    ...
</div>
</div>
</body>

klode · Accepted Answer

The source of the error is a wrong path for the html template to be included. If the template path is incorrect and does not match any server route the sever default is to serve the whole index.html. This initiates an infinite loop because upon loading index.html the include template is requested again with the wrong path and index.html is served, and included, again and again and again .. resulting in the "10 $digest() iterations reached" error

In my case the correct path to request the test.htmlfrom the server is static/src/views/test.html.

Changing the include from this

<div ng-include="'test.html'"> </div>

to this

<div ng-include="'static/src/views/test.html'"> </div>

solves the problem.

In my case the correct path to request the test.htmlfrom the server is static/src/views/test.html.

Changing the include from this

<div ng-include="'test.html'"> </div>

to this

<div ng-include="'static/src/views/test.html'"> </div>

solves the problem.

ng-include recursively including whole index.html, and giving error "10 $digest() iterations reached"

Tags:

javascript

angularjs

angularjs-ng-include

Testing

Testing

Testing

klode

1 Answers

klode

Recent Activity

Donate For Us

ng-include recursively including whole index.html, and giving error "10 $digest() iterations reached"

Tags:

javascript

angularjs

angularjs-ng-include

Testing

Testing

Testing

klode

1 Answers

klode

Related questions

Recent Activity

Donate For Us