Tried to Load Angular More Than Once

javascript angularjs gruntjs

114,256

Solution 1

This could be a number of issues: essentially it's a problem of routeProvider not finding a file and recursively loading the default.

For me, it turned out that it wasn't minification but concatenation of the js that caused the problems.

angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/listing.html',
        controller: 'ListingCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]).constant('FIREBASE_URL', 'something');

You'll notice that if the app can't find a file (i.e., otherwise), then it will redirect to the root, which in this case loads the templateUrl. But if your templateUrl is wrong, then it will cause a recursion that reloads index.html loading angular (and everything else) over and over.

In my case, grunt-concat caused the templateUrl to be wrong after build, but not before.

Solution 2

The problem could occur when $templateCacheProvider is trying to resolve a template in the templateCache or through your project directory that does not exist

Example:

templateUrl: 'views/wrongPathToTemplate'

Should be:

templateUrl: 'views/home.html'

Solution 3

This doesn't have anything to do with app.js at all. Instead, this warning is logged when you include the Angular JS library more than once.

I've managed to reproduce the error in this JSBin. Note the two script tags (two different versions):

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

Relevant Angular code at GitHub.

Solution 4

Seems like nobody has mentioned this anywhere so here is what triggered it for me: I had the ng-view directive on my body. Changing it like so

<body layout="column">
<div ng-view></div>
...
</body>

stopped the error.

Solution 5

I was also facing such an issue where I was continously getting an infinite loop and the page was reloading itself infinitely. After a bit of debugging I found out that the error was being caused because, angular was not able to load template given with a particular id because the template was not present in that file.

Be careful with the url's which you give in angular apps. If its not correct, angular can just keep on looking for it eventually, leading to infinite loop!

Hope this helps!

View more solutions

114,256

Author by

Kyle Cureau

Currently building crone.ai and hakeema. Reach me on Twitter

Updated on August 02, 2022

Comments

Kyle Cureau almost 2 years
I have a yeoman scaffolded app (the angular fullstack generator).

grunt serve works fine, but grunt build produces a distribution that locks up memory, most probably because of circular references in angular.

I upgraded angular to 1.2.15. The error I get is:

WARNING: Tried to Load Angular More Than Once

Prior to upgrading, the error was:

Error: 10 $digest() iterations reached. Aborting!

It's pretty difficult to debug as it only happens after build / minification. All my modules are in angular's array format, so the minification DI shouldn't be a problem but it is.

There's no single script that causes this. The only way it goes away is if I don't initialize with my app.js file. My app.js file is below.

Any thing come to mind?
```
'use strict';

angular.module('myApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ngTagsInput',
  'ui.bootstrap',
  'google-maps',
  'firebase'
]);

angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/listing.html',
        controller: 'ListingCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]).constant('FIREBASE_URL', 'something');
```
Kyle Cureau about 10 years

Yea that makes sense, but it actually did have to do with app.js in my case -- I just posted my findings.
Sergey Shteyn over 9 years

did this problem occur in 1.2.14 as well?
Greg Grater over 9 years

This was a great solution to my issue. In my case, I'm using Asp.Net MVC to deliver my templates. I made a stupid mistake of calling the MVC controller the same name as my angular route. Your solution forced me to test each templateUrl. If the templateUrl is broken (same as your angular route), it ain't gonna work. Thanks a million.
James Gentes over 9 years

+1 for simple explanation: "Essentially it's a problem of routeProvider not finding a file and recursively loading the default."
Yazan Rawashdeh about 9 years

Happened exactly to me , but then I got here <3
victor175 over 8 years

If this warning appears, this is a sign that you may be trying to load the page recursively. If you remove JQuery the warning may fade, but the problem may still occur, which is actually worse.
Hashbrown over 8 years

yes, for me having the view be where the <script> tags for angular were were causing the issue (my script references are under <body>)
Hashbrown over 8 years

doing this hid the error for me too, but I later discovered that this was the real issue
MalcolmOcean almost 8 years

I had a similar issue: got this error message when the path to my template broke. Thanks :)
Laguna over 7 years

Thanks! this was my case and now it's fixed!
ryaz about 7 years

Maybe it will be helpful for someone, I got this error when some templates were deleted after merge: ` <div ng-include="'path_to_not_existing_template'"></div>`
Prashant Pokhriyal almost 7 years

you are the saviour
Venkat almost 7 years

life saver! this should go to first
rahul over 6 years

@ryaz yes it was indeed the cause for the problem.
Deepak Thomas over 6 years

Makes sense! When the template URL is invalid, the core index.html would be coming in the response from the server if errors are not handled properly, which would have the JS includes
Pi Home Server over 6 years

Great answer ! In my case was the gulp build too and changing the path saved my day !
Carrm over 6 years

I had the same issue with arrow functions when I tried to rewrite my code using ES6. Do you know why arrow functions work everywhere except for module/controller/service declarations?
Sean over 4 years

You are a legend! This was in my project from day 1. It is finally solved and now I can sleep in peace. Thanks a million!
Nicolò over 3 years

Made my day.. This is undebuggable. Thanks!