不止一次尝试加载角度

我有一个自耕农脚手架应用程序(角全栈生成器)。

grunt serve工作得很好，但是 grunt build产生一个锁定内存的分布，很可能是因为角度的循环引用。

我把角度升级到 1.2.15，得到的错误是:

WARNING: Tried to Load Angular More Than Once

在升级之前，错误是:

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

调试是相当困难的，因为它只在构建/缩小之后发生。我所有的模块都是角度的阵列格式，所以缩小 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');
116517 次浏览
小开

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

GitHub处的相关角码。

小开
最佳答案

这可能有很多问题: 本质上，这是一个 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加载角(和其他一切)一遍又一遍。

在我的例子中，grunt-concat 在构建之后导致 templateUrl 错误，但在构建之前不会。

小开

当 $templateCacheProvider 试图解析 templateCache 中的模板或通过您的项目目录解析 根本不存在时，可能会发生此问题

例如:

templateUrl: 'views/wrongPathToTemplate'

应该是:

templateUrl: 'views/home.html'
小开

我有一个类似的问题，对我来说，这个问题是由于一些缺少分号的控制器。应用程序的缩小可能导致代码执行不正确(很可能产生的代码导致状态变化，从而导致视图呈现，然后控制器再次执行代码，以此类推)。

小开

你必须改变角度路线’/’！这是一个问题，因为’/’基地址请求。如果你改变“/”= > “/home”或者“/hede”角度将会很好的工作。

小开

我也有同样的问题，问题是 JQuery 和 Angular 之间的冲突。Angular 无法为自己设置完整的 JQuery 库。因为 JQLite 在大多数情况下已经足够了，所以我首先在网页中加入了 Angular，然后加载了 Jquery。那时错误已经消失了。

小开

资本化也很重要! 在我的指令中，我试图说明:

templateUrl: 'Views/mytemplate'

并且得到了“不止一次”的警告。当我把这个警告改成:

templateUrl: 'views/mytemplate'

纠正我，但是我认为这是因为我放置指令的页面在路由配置函数的“视图”下而不是“视图”下。

小开

我也犯了同样的错误。几个小时后，我注意到我的。JSON 文件，在最后一个键-值对上。

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

然后我把它取下来(最后一个’,’) ，这就解决了问题。

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

似乎没有人在任何地方提到这一点，所以这里是什么触发了我: 我的身体上有一个 n-view 指令，像这样改变它

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

阻止了错误。

小开

这也发生在我身上。NET 和 MVC 5之后，我意识到在 Index.cshtml 文件的标签中:

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

再次包括作为部分脚本发生在你身上。要解决服务器端的问题，我所做的就是返回部分视图。比如:

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


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


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

在我的例子中，我是在页面上使用 jquery 和 angle js 时得到这个错误的。

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

警告消失了。

小开

对于任何将来有这个问题的人来说，对我来说，它是由一个箭头函数引起的，而不是由一个匿名函数在 abc0块:

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


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

在我的示例中，index.html 嵌入了两个视图，即 view1.html 和 view2.html。我开发了这两个独立于 index.html 的视图，然后尝试使用 path 嵌入。 所以我在2视图 html 文件中定义了所有的脚本文件，导致了这个警告。在从视图中删除包含 angularJS 脚本文件后，警告消失。

简而言之，脚本文件 angularJS、 jQuery 和 angle-route.js 应该只包含在 index.html 中，而不应该包含在 view html 文件中。

小开

今天遇到了这个问题，我想我可以发布我是如何解决它的。在我的例子中，我有一个 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 负载(每次加载角度库)。

要解决这个问题，我需要做的就是从路由提供程序中删除 index.html ——如下所示:

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

另一个例子是 Webpack，它将角连接到 bundle.js 中，与从 index.html <script>标记加载的角连接在一起。

这是因为我们在许多文件中使用了显式导入 angular:

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

所以，webpack 决定把它也捆绑起来。把所有这些都清理成:

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

一次性修好 Tried to Load Angular More Than Once。

小开

我的问题是下面这行(HAML) :

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

请注意，我有一个角 ng-click和我有一个 href标签，将跳转到 #是相同的页面。我只需要移除 href标签，就可以开始了。

小开

我也遇到过同样的问题(“试图多次加载角度”) ，因为我在 index.html 中包含了两个 angularJs 文件(没有察觉到)。

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

我有同样的问题，因为我在 index.html中有两次 angular:

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

请注意，警告只有在 html5模式为 true 时才会出现，当我的 html5模式为 false 时，我没有看到这个警告。

因此，删除第一个 angular.js就解决了这个问题。

小开

我在代码笔上遇到过这个问题，原来这只是因为我在加载 JQuery 之前加载了 Angular。不知道是否适用于其他案子。

小开

我也面临这样一个问题，我不断得到一个无限循环和页面重新加载本身无限。经过一段时间的调试，我发现这个错误的原因是，由于模板没有出现在该文件中，因此使用特定的 id 给出了 无法加载模板。

小心你在有角度的应用程序中提供的 url。如果它不正确，角度最终只能继续寻找，导致无限循环！

希望这个能帮上忙！

小开

对我来说，问题是，我在同一个文件夹中备份了控制器(js)文件和其他一些更改，并捆绑加载了控制器文件(原始和备份 js)。从绑定的脚本文件夹中删除备份解决了这个问题。

小开

我有这个问题，当 少了一个结束标签在 html 中。

enter image description here

所以不是:

<table></table>

. . 我的 HTML 是

<table>...<table>

尝试在 angle 之后加载 jQuery，如上所述。这阻止了错误消息，但并没有真正解决问题。还有 jQuery。发现后来并没有真正起作用。.

解决方案是修复缺失的结束标记。


提交答案