stackoom
  简体   繁体   中英

Tried to Load Angular More Than Once

 原文  2014-03-23 19:26:15  2   22    javascript/ angularjs/ gruntjs

Question

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

22 answers

solution1
 146 ACCPTED  2014-03-24 16:45:18

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 (ie, 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.

solution2
 18  2014-07-22 11:11:33

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'

solution3
 15  2014-03-24 04:40:55

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 .

solution4
 14  2015-02-25 18:41:45

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.

solution5
 8  2017-09-20 16:29:09

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!

solution6
 6  2014-11-18 10:54:46

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.

solution7
 6  2015-04-17 09:23:18

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.

solution8
 5  2016-07-24 15:10:06

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 : '/'
  });

solution9
 2  2014-10-28 07:15:26

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).

solution10
 2  2017-05-22 18:59:56

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.

solution11
 1  2015-01-14 07:17:17

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.

solution12
 1  2015-03-16 23:43:32

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();
    }
}

solution13
 1  2017-03-12 01:47:09

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">

solution14
 1  2017-05-20 11:02:31

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.

solution15
 0  2014-11-03 00:05:21

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

solution16
 0  2016-05-11 04:31:57

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() {...})

solution17
 0  2016-07-23 18:06:20

In my case I have index.html which embeds 2 views ie 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.

solution18
 0  2016-10-19 23:57:25

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.

solution19
 0  2017-02-23 17:05:30

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.

solution20
 0  2018-08-02 12:15:22

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.

solution21
 0  2019-11-12 01:45:05

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.

solution22
 -1  2015-02-06 05:45:17

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"
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Tried to load angular more than once on ionic WARNING: Tried to load angular more than once WARNING: Tried to load angular more than once during page load Tried to load angular more than once in Angular js WARNING: Tried to load angular more than once. Angular JS WARNING: Tried to load angular more than once…because of jQuery…why? View not injected or WARNING: Tried to load angular more than once AngularJS Tried to load more than once Angular inside of Angular - solving: WARNING: Tried to load angular more than once WARNING: Tried to load angular more than once. Angular + Ionic + Require JS
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM