Tried to Load Angular More Than Once

2020-01-24 04:05发布

站内问答 / JavaScript
2077 22 5

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条回答
等我变得足够好
2楼-- · 2020-01-24 04:40

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.

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
3楼-- · 2020-01-24 04:40

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.

查看更多
0人赞 添加讨论(0) 举报
疯言疯语
4楼-- · 2020-01-24 04:41

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.

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
5楼-- · 2020-01-24 04:41

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 : '/'
  });
查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
6楼-- · 2020-01-24 04:44

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.

查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
7楼-- · 2020-01-24 04:47

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!

查看更多
0人赞 添加讨论(0) 举报
1 2 3 4 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)