Reputation: 19366

Tried to Load Angular More Than Once

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');

Upvotes: 77

Answers (22)

Bogmag

Reputation: 69

I had this problem when missing a closing tag in the html.

So instead of:

<table></table>

..my HTML was

<table>...<table>

Tried to load jQuery after angular as mentioned above. This prevented the error message, but didn't really fix the problem. And jQuery '.find' didn't really work afterwards..

Solution was to fix the missing closing tag.

Upvotes: 0

grant

Reputation: 4333

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'

Upvotes: 19

iTSrAVIE

Reputation: 834

The problem for me was, I had taken backup of controller (js) file with some other changes in the same folder and bundling loaded both the controller files (original and backup js). Removing backup from the scripts folder, that was bundled solved the issue.

Upvotes: 0

Kumar Shubham

Reputation: 504

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!

Upvotes: 7

Salix

Reputation: 1384

I had that problem on code pen, and it turn out it's just because I was loading JQuery before Angular. Don't know if that can apply for other cases.

Upvotes: 2

SoftTimur

Reputation: 5510

I have the same problem, because I have angular two times in index.html:

<script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Note that the warning arises only when html5 mode is true, when my html5 mode was false, I did not see this warning.

So removing the first angular.js solves the problem.

Upvotes: 1

Biruel Rick

Reputation: 786

I had this same problem ("Tried to Load Angular More Than Once") because I had included twice angularJs file (without perceive) in my index.html.

<script src="angular.js">
<script src="angular.min.js">

Upvotes: 1

schmudu

Reputation: 2233

My problem was the following line (HAML):

%a{"href"=>"#", "ng-click" => "showConfirmDeleteModal()"} Delete

Notice that I have a angular ng-click and I have an href tag which will jump to # which is the same page. I just had to remove the href tag and I was good to go.

Upvotes: 0

ET-CS

Reputation: 7160

Another case is with Webpack which concating angular into the bundle.js, beside the angular that is loaded from index.html <script> tag.

this was because we used explicit importing of angular in many files:

define(['angular', ...], function(angular, ...){

so, webpack decided to bundle it too. cleaning all of those into:

define([...], function(...){

was fixing Tried to Load Angular More Than Once for once and all.

Upvotes: 0

gilmatic

Reputation: 1864

Had this problem today and figured I would post how I fixed it. In my case I had an index.html page with:

<body ng-app="myApp" ng-controller="mainController"
   <div ng-view></div>
</body>

and in my app.js file I had the following code:

$routeProvider.when('/', {
    controller : 'mainController',
    templateUrl : 'index.html',
    title : 'Home'
  }).when('/other', {
    controller : 'otherController',
    templateUrl : 'views/other.html',
    title : 'other'
  }).otherwise({
    redirectTo : '/'
  });

As a result, when I went to the page (base_url/) it loaded index.html, and inside the ng-view it loaded index.html again, and inside that view it loaded index.html again.. and so on - creating an infinite recursive load of index.html (each time loading angular libraries).

To resolve all I had to do was remove index.html from the routProvider - as follows:

$routeProvider.when('/other', {
    controller : 'otherController',
    templateUrl : 'views/other.html',
    title : 'other'
  }).otherwise({
    redirectTo : '/'
  });

Upvotes: 5

Maverick

Reputation: 748

In my case I have index.html which embeds 2 views i.e view1.html and view2.html. I developed these 2 views independent of index.html and then tried to embed using route. So I had all the script files defined in the 2 view html files which was causing this warning. The warning disappeared after removing the inclusion of angularJS script files from views.

In short, the script files angularJS, jQuery and angular-route.js should be included only in index.html and not in view html files.

Upvotes: 0

bcherny

Reputation: 3172

For anyone that has this issue in the future, for me it was caused by an arrow function instead of a function literal in a run block:

// bad
module('a').run(() => ...)

// good
module('a').run(function() {...})

Upvotes: 0

Rodrigo

Reputation: 101

I was having the exact same error. After some hours, I noticed that there was an extra comma in my .JSON file, on the very last key-value pair.

//doesn't work
{
    "key":"value",
    "key":"value",
    "key":"value",
}

Then I just took it off (the last ',') and that solved the problem.

//works
{
    "key":"value",
    "key":"value",
    "key":"value"
}

Upvotes: -1

Amit Singh

Reputation: 2275

In my case I was getting this error while using jquery as well as angular js on the page.

<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/angular-route.js" type="text/javascript"></script>

I removed :

<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

And the warning disappeared.

Upvotes: 6

Jose Rodriguez

Reputation: 10162

This happened to me too with .NET and MVC 5 and after a while I realized that within the label on Index.cshtml file:

<div data-ng-view=""></div>

again included as section scripts happens to you. To solve the problem on the server side what I do is return the partial view. Something like:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Login()
    {
        return PartialView();
    }

    public ActionResult About()
    {
        return PartialView();
    }
}

Upvotes: 1

Christian Geese

Reputation: 515

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.

Upvotes: 14

Arman Bimatov

Reputation: 1829

Capitalization matters as well! Inside my directive, I tried specifying:

templateUrl: 'Views/mytemplate'

and got the "more than once" warning. The warning disappeared when I changed it to:

templateUrl: 'views/mytemplate'

Correct me, but I think this happened because page that I placed the directive on was under "views" and not "Views" in the route config function.

Upvotes: 1

user919532

Reputation:

I had the same issue, The problem was the conflict between JQuery and Angular. Angular couldn't set the full JQuery library for itself. As JQLite is enough in most cases, I included Angular first in my web page and then I loaded Jquery. The error was gone then.

Upvotes: 6

Salih KARAHAN

Reputation: 329

You must change angular route '/'! It is a problem because '/' base url request. If you change '/' => '/home' or '/hede' angular will good work.

Upvotes: 0

Kyle Cureau

Reputation: 19366

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.

Upvotes: 150

Dia Kharrat

Reputation: 6006

I had a similar issue, and for me the issue was due to some missing semicolons in the controller. The minification of the app was probably causing the code to execute incorrectly (most likely the resulting code was causing state mutations, which causes the view to render, and then the controller executes the code again, and so on recursively).

Upvotes: 2

SomeKittens

Reputation: 39532

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.

Upvotes: 15

Tried to Load Angular More Than Once

Answers (22)

Related Questions