logo标签列表

尝试多次加载Angular

javascriptangularjsgruntjs
77

我有一个yeoman脚手架应用（angular fullstack生成器）。

grunt serve正常运行，但是grunt build生成的分发卡住了内存，很可能是因为angular中存在循环引用。

我将angular升级到1.2.15。我收到的错误是：

WARNING: Tried to Load Angular More Than Once

在升级之前，出现了以下错误：

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

它很难调试，因为它只会在构建/缩小之后发生。我的所有模块都是以angular的数组格式编写的，所以缩小DI不应该成为问题，但实际上确实是问题。

没有单个脚本导致这种情况。唯一的方法是如果我不使用我的app.js文件进行初始化，则该问题会消失。我的app.js文件如下。

您是否有任何想法？

'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个回答
150

可能有多个问题：基本上是routeProvider找不到文件并递归加载默认文件的问题。

对我来说，问题不在于代码压缩，而是js拼接导致了问题。

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

你会注意到，如果应用程序找不到一个文件(即otherwise)，它将重定向到根目录，这种情况下会加载templateUrl。但是，如果你的templateUrl有误，那么就会导致递归，一遍又一遍地重新加载index.html，加载angular（以及其他所有内容）。

在我的情况中，grunt-concat在构建后导致templateUrl出现问题，但在构建之前没有问题。

这个问题在1.2.14版本中也出现了吗？ - Sergey Shteyn
19

еҪ“$templateCacheProviderе°қиҜ•еңЁtemplateCacheжҲ–йҖҡиҝҮжӮЁзҡ„йЎ№зӣ®зӣ®еҪ•жқҘи§ЈжһҗдёҖдёӘдёҚеӯҳеңЁзҡ„жЁЎжқҝж—¶пјҢеҸҜиғҪдјҡеҮәзҺ°й—®йўҳгҖӮ

дҫӢеҰӮпјҡ

templateUrl: 'views/wrongPathToTemplate'

应该是：

templateUrl: 'views/home.html'
2
也许对某些人有帮助，我在合并后删除了一些模板后遇到了这个错误： <div ng-include="'path_to_not_existing_template'"></div> - ryaz
@ryaz 是的，这确实是问题的原因。 - rahul
15

这与app.js没有任何关系。 相反，当您多次包含 Angular JS 库时，会记录此警告。

我已经在这个JSBin中复现了这个错误。请注意两个脚本标签（两个不同的版本）：

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

有关 Angular 的相关代码，请访问GitHub。

4
是的，那很有道理，但在我的情况下确实与app.js有关 - 我刚刚发布了我的发现。 - Kyle Cureau
你是个传奇！这个问题从一开始就困扰着我。终于解决了，现在我可以安心睡觉了。非常感谢！ - Sean
14

似乎没有人在任何地方提到这一点，所以我来解释一下是什么触发了它：

我的 body 上有 ng-view 指令。像这样更改它：

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

修复了错误。

是的，对我来说，视图在 Angular 的 <script> 标签所在的位置引起了问题（我的脚本引用位于 <body> 下面）。 - Hashbrown
你是救世主。 - Prashant Pokhriyal
7
我之前也遇到过一个问题，页面在不停地无限刷新。经过一番排查，我发现这个错误是由于 Angular 不能加载特定 ID 的模板，因为该模板不存在于文件中所致。
在使用 Angular 应用程序时，请注意URL的正确性。如果URL不正确，Angular 可能会继续寻找它，最终导致无限循环！
希望这可以帮到您！
1
让我开心了。这是无法调试的。谢谢！ - Nicolò
6

我曾经遇到过同样的问题。问题是JQuery和Angular之间存在冲突。Angular无法为自己设置完整的JQuery库。由于在大多数情况下JQLite已经足够，因此我首先将Angular包含在我的网页中，然后再加载Jquery。这样错误就消失了。

我也遇到了这个问题。将angularjs脚本移到顶部以便首先加载，然后再放置jquery。错误现在已经消失了。 - basagabi
6
在我的情况下，我在页面上同时使用jQuery和AngularJS时遇到了这个错误。
<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>

我删掉了：

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

警告消失了。

3
如果出现此警告，这意味着您可能正在尝试递归加载页面。如果您删除JQuery，则警告可能会消失，但问题仍可能发生，这实际上更糟糕。 - victor175
1
做这件事对我来说也隐藏了错误，但后来我发现这个才是真正的问题。 - Hashbrown
5
今天我遇到了一个问题，我想分享一下我是如何解决它的。在我的情况下，我有一个包含以下内容的index.html页面：
<body ng-app="myApp" ng-controller="mainController"
   <div ng-view></div>
</body>

在我的app.js文件中，我有以下代码：
$routeProvider.when('/', {
    controller : 'mainController',
    templateUrl : 'index.html',
    title : 'Home'
  }).when('/other', {
    controller : 'otherController',
    templateUrl : 'views/other.html',
    title : 'other'
  }).otherwise({
    redirectTo : '/'
  });

作为结果，当我打开页面（base_url/）时，它加载了index.html，在ng-view内部再次加载了index.html，在那个视图中又再次加载了index.html...如此往复——创建了一个无限递归加载index.html的问题（每次加载Angular库）。
要解决这个问题，只需要从routeProvider中删除index.html，操作如下：
$routeProvider.when('/other', {
    controller : 'otherController',
    templateUrl : 'views/other.html',
    title : 'other'
  }).otherwise({
    redirectTo : '/'
  });
2

我遇到了类似的问题，对我来说问题是由于控制器中缺少分号。应用程序的压缩可能导致代码执行不正确（最可能的是生成的代码导致状态变异，这会导致视图呈现，然后控制器再次执行代码，如此递归）。

2

我在 CodePen 上遇到了这个问题，结果发现只是因为我在 Angular 之前加载了 JQuery。不知道是否适用于其他情况。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接