Best IT Recipes

Tried to load Angular More than once

I have a hanging wood application (angular full steel generator).

grunt serve works fine, but grunt build creates a distribution that blocks memory, most likely due to circular links in angular.

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

WARNING: Tried to Load Angular More Than Once

Prior to update error:

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

This is quite difficult to debug, as this only happens after assembly / minimization. All my modules are in angular array format, so DI initialization should not be a problem, but it is.

There is no script that calls this. The only way to get away is not to initialize the app.js. My app.js file is below.

Does 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');
+70
javascript angularjs gruntjs
Mar 23 '14 at 19:26
source share
21 answers

This can be a series of problems: in essence, this is a routeProvider problem that does not find the file and recursively loads the default value.

For me, it turned out that it was not mining, but the concatenation of js, which caused problems.

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

You will notice that if the application cannot find the file (i.e. otherwise ), it will redirect it to the root directory, which in this case will load templateUrl . But if your templateUrl is wrong, this will result in a recursion that reloads index.html loading angular (and everything else) over and over.

In my case, grunt-concat caused a templateUrl error after the build, but not before.

+140
Mar 24 '14 at 16:45
source share

I ran into this problem when I forgot to include ".html" for the views.

Example:

 templateUrl: 'views/home'

Must be:

 templateUrl: 'views/home.html'
+15
Jul 22 '14 at 11:11
source share

It seems that no one mentioned this anywhere, so here is what caused it to me: I had the ng-view directive on my body. Change this type

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

stopped the error.

+13
Feb 25 '15 at 18:41
source share

This has nothing to do with app.js at all. Instead, this warning is logged when you enable the Angular JS library more than once.

I was able to reproduce the error in this JSBin . Notice 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>

Corresponding Angular GitHub code.

+12
Mar 24 '14 at 4:40
source share

I had the same problem. The problem was the conflict between jQuery and Angular. Angular was unable to install the complete jQuery library for itself. Since JQLite is sufficient in most cases, I included Angular first in my web page and then loaded jQuery. The error has disappeared.

+6
Nov 18 '14 at 10:54
source share

In my case, I was getting this error when 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 deleted:

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

And the warning disappeared.

+6
Apr 17 '15 at 9:23
source share

If I had thought this problem today, I would have published 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 ng-view it loaded index.html again, and inside that view it loaded index.html again .. and so on - creating an infinite recursive loading index.html (every time you load the angular libraries).

To solve all I had to do was remove index.html from the Provider route - as follows:

 $routeProvider.when('/other', { controller : 'otherController', templateUrl : 'views/other.html', title : 'other' }).otherwise({ redirectTo : '/' });
+5
Jul 24 '16 at 15:10
source share

I also ran into such a problem when I was constantly getting an infinite loop and the page reloaded endlessly. After some debugging, I found that the error was caused because angular was not able to load the template specified with a specific identifier, because the template was not present in this file.

Be careful with the URL that you provide in angular applications. If this is not correct, angular may just keep looking for it in the end, which will lead to an infinite loop!

Hope this helps!

+5
Sep 20 '17 at 16:29
source share

I had a similar problem and for me the problem was related to some missing semicolons in the controller. Minimizing the application probably led to incorrect code execution (most likely, the resulting code caused state mutations, which forces the view to be visualized, and then the controller executes the code again, etc. Recursively).

+2
Oct 28 '14 at 7:15
source share

I had this problem with a code pen, and it turned out simply because I downloaded jQuery to Angular. I do not know if this can be applied for other cases.

+2
May 22 '17 at 18:59
source share

Capitalization is also important! In my directive, I tried to specify:

 templateUrl: 'Views/mytemplate'

and received a warning "more than once." The warning disappeared when I changed it to:

 templateUrl: 'Views/mytemplate'

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

+1
Jan 14 '15 at 7:17
source share

This happened to me with both .NET and MVC 5, and after a while I realized that inside the label in the Index.cshtml file:

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

included again in the script section with you. To solve the server side issue, I believe a partial view. Something like:

 public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult Login() { return PartialView(); } public ActionResult About() { return PartialView(); } }
+1
Mar 16 '15 at 23:43
source share

I had the same problem ("I tried to download Angular more than once") because I included the angularJs file twice (without perception) in my index.html.

 <script src="angular.js"> <script src="angular.min.js">
+1
Mar 12 '17 at 1:47 on
source share

You must change the angular route '/'! This is a problem because the request is '/' of the base url. If you change the '/' => '/ home' or the '/ hede' angular, it will work well.

0
Nov 03 '14 at 0:05
source share

I had the same error. After a few hours, I noticed that an extra comma was added to my .JSON file, in the last key-value pair.

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

Then I just took off (the last one) and this solved the problem.

 //works { "key":"value", "key":"value", "key":"value" }
0
Feb 06 '15 at 5:45
source share

For those who have this problem in the future, for me this is caused by the arrow function instead of the function literal in the run block:

 // bad module('a').run(() => ...) // good module('a').run(function() {...})
0
May 11 '16 at 4:31
source share

In my case, I have index.html, which includes 2 views ie view1.html and view2.html. I designed these 2 views independently of index.html and then tried to implement using a route. So I had all the script files defined in 2 html view files that caused this warning. The warning disappeared after removing the inclusion of angularJS script files from the views.

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

0
Jul 23 '16 at 18:06
source share

Another case is Webpack , which does concating angular in bundle.js, in addition to angular, which is loaded from the index.html <script> .

this was due to the fact that we used explicit angular import to many files:

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

so, webpack also decided to bundle it. cleaning all of them:

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

fixed Tried to Load Angular More Than Once at a time and that’s it.

0
19 Oct '16 at 23:57
source share

My problem was the following line (HAML):

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

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

0
Feb 23 '17 at 17:05
source share

I have the same problem because I have angular twice in index.html :

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

Please note that the warning only occurs when the html5 mode is true, when my html5 mode was false, I did not see this warning.

Therefore, removing the first angular.js solves the problem.

0
May 20 '17 at 11:02
source share

The problem for me was that I made a backup copy of the controller file (js) with some other changes in the same folder and linked the downloaded controller files (original and backup js). Removing the backup from the scripts folder that was bundled solved the problem.

0
Aug 02 '18 at 12:15
source share


More articles:


All Articles