尝试多次加载 Angular
[英]Tried to Load Angular More Than Once
问题描述
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. grunt serve工作正常，但grunt build产生一个锁定内存的分布，很可能是因为 angular 中的循环引用。
I upgraded angular to 1.2.15 .我将 angular 升级到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.我所有的模块都是 angular 的数组格式，所以缩小 DI 不应该是一个问题，但它是。
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.它消失的唯一方法是我不使用我的 app.js 文件进行初始化。 My app.js file is below.我的 app.js 文件在下面。
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 个解决方案
解决方案1
146 已采纳 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.这可能是许多问题：本质上是 routeProvider 没有找到文件并递归加载默认值的问题。
For me, it turned out that it wasn't minification but concatenation of the js that caused the problems.对我来说，结果不是缩小，而是导致问题的 js 的串联。
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 .您会注意到，如果应用程序找不到文件（即， otherwise ），它将重定向到根目录，在这种情况下会加载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.但是如果你的templateUrl是错误的，那么它会导致一个递归，一遍又一遍地重新加载index.html加载 angular（和其他所有东西）。
In my case, grunt-concat caused the templateUrl to be wrong after build, but not before.就我而言， grunt-concat 导致 templateUrl 在构建后出错，但之前没有。
解决方案2
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当 $templateCacheProvider 尝试解析 templateCache 中的模板或通过不存在的项目目录时，可能会出现此问题
Example:例子：
templateUrl: 'views/wrongPathToTemplate'
Should be:应该：
templateUrl: 'views/home.html'
解决方案3
15 2014-03-24 04:40:55
This doesn't have anything to do with app.js at all.这与app.js完全没有任何关系。 Instead, this warning is logged when you include the Angular JS library more than once.相反，当您多次包含 Angular JS 库时，会记录此警告。
I've managed to reproduce the error in this JSBin .我已经成功地重现了这个 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>
解决方案4
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.似乎没有人在任何地方提到过这一点，所以这就是触发它的原因：我的身体上有 ng-view 指令。 Changing it like so像这样改变它
<body layout="column">
<div ng-view></div>
...
</body>
stopped the error.停止了错误。
解决方案5
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.经过一些调试后，我发现错误是由于 angular无法加载具有特定 id 的模板，因为该模板不存在于该文件中。
Be careful with the url's which you give in angular apps.请注意您在 Angular 应用程序中提供的 url。 If its not correct, angular can just keep on looking for it eventually, leading to infinite loop!如果它不正确，angular 最终只能继续寻找它，导致无限循环！
Hope this helps!希望这可以帮助！
解决方案6
6 2014-11-18 10:54:46
I had the same issue, The problem was the conflict between JQuery and Angular.我有同样的问题，问题是 JQuery 和 Angular 之间的冲突。 Angular couldn't set the full JQuery library for itself. Angular 无法为自己设置完整的 JQuery 库。 As JQLite is enough in most cases, I included Angular first in my web page and then I loaded Jquery.由于 JQLite 在大多数情况下就足够了，我首先在我的网页中包含了 Angular，然后我加载了 Jquery。 The error was gone then.那个时候错误就消失了。
解决方案7
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.在我的情况下，我在页面上使用 jquery 和 angular 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>
I removed :我删除了 ：
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
And the warning disappeared.然后警告消失了。
解决方案8
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:就我而言，我有一个 index.html 页面：
<body ng-app="myApp" ng-controller="mainController"
<div ng-view></div>
</body>
and in my app.js file I had the following code:在我的 app.js 文件中，我有以下代码：
$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).结果，当我转到页面 (base_url/) 时，它加载了 index.html，在 ng-view 中再次加载了 index.html，在该视图中再次加载了 index.html .. 等等 - 创建index.html 的无限递归加载（每次加载角度库）。
To resolve all I had to do was remove index.html from the routProvider - as follows:要解决我所要做的就是从 routProvider 中删除 index.html - 如下：
$routeProvider.when('/other', {
controller : 'otherController',
templateUrl : 'views/other.html',
title : 'other'
}).otherwise({
redirectTo : '/'
});
解决方案9
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).应用程序的缩小可能导致代码执行不正确（很可能结果代码导致状态突变，导致视图呈现，然后控制器再次执行代码，以此类推）。
解决方案10
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.我在代码笔上遇到了这个问题，结果证明这只是因为我在 Angular 之前加载了 JQuery。 Don't know if that can apply for other cases.不知道其他情况下能不能用。
解决方案11
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.纠正我，但我认为这是因为我放置指令的页面在路由配置功能中的“视图”下而不是“视图”下。
解决方案12
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:这也发生在我身上 .NET 和 MVC 5 一段时间后，我意识到在 Index.cshtml 文件的标签中：
<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();
}
}
解决方案13
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.我遇到了同样的问题（“尝试多次加载 Angular”），因为我在 index.html 中包含了两次 angularJs 文件（没有感知）。
<script src="angular.js">
<script src="angular.min.js">
解决方案14
1 2017-05-20 11:02:31
I have the same problem, because I have angular two times in index.html :我有同样的问题，因为我在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>
Note that the warning arises only when html5 mode is true, when my html5 mode was false, I did not see this warning.请注意，警告仅在html5模式为 true 时出现，当我的html5模式为 false 时，我没有看到此警告。
So removing the first angular.js solves the problem.所以删除第一个angular.js解决了这个问题。
解决方案15
0 2014-11-03 00:05:21
You must change angular route '/'!你必须改变角度路线'/'！ It is a problem because '/' base url request.这是一个问题，因为 '/' 基本 url 请求。 If you change '/' => '/home' or '/hede' angular will good work.如果您更改 '/' => '/home' 或 '/hede' angular 会很好地工作。
解决方案16
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:对于将来遇到此问题的任何人，对我来说，它是由箭头函数而不是run块中的函数文字引起的：
// bad
module('a').run(() => ...)
// good
module('a').run(function() {...})
解决方案17
0 2016-07-23 18:06:20
In my case I have index.html which embeds 2 views ie view1.html and view2.html.就我而言，我有 index.html，它嵌入了 2 个视图，即 view1.html 和 view2.html。 I developed these 2 views independent of index.html and then tried to embed using route.我开发了这两个独立于 index.html 的视图，然后尝试使用路由嵌入。 So I had all the script files defined in the 2 view html files which was causing this warning.所以我在导致此警告的 2 个视图 html 文件中定义了所有脚本文件。 The warning disappeared after removing the inclusion of angularJS script files from views.从视图中删除包含 angularJS 脚本文件后，警告消失了。
In short, the script files angularJS, jQuery and angular-route.js should be included only in index.html and not in view html files.
解决方案18
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.另一种情况是Webpack将 angular 连接到 bundle.js 中，除了从 index.html <script>标签加载的 angular。
this was because we used explicit importing of angular in many files:这是因为我们在许多文件中使用了angular显式导入：
define(['angular', ...], function(angular, ...){
so, webpack decided to bundle it too.所以，webpack 也决定捆绑它。 cleaning all of those into:将所有这些清理成：
define([...], function(...){
was fixing Tried to Load Angular More Than Once for once and all.正在修复Tried to Load Angular More Than Once多次Tried to Load Angular More Than Once一劳永逸。
解决方案19
0 2017-02-23 17:05:30
My problem was the following line (HAML):我的问题是以下行（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.请注意，我有一个有角度的ng-click并且我有一个href标签，它将跳转到#同一个页面。 I just had to remove the href tag and I was good to go.我只需要删除href标签就可以了。
解决方案20
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).对我来说的问题是，我备份了控制器 (js) 文件，并在同一文件夹中进行了一些其他更改，并且捆绑加载了控制器文件（原始和备份 js）。 Removing backup from the scripts folder, that was bundled solved the issue.从捆绑的脚本文件夹中删除备份解决了这个问题。
解决方案21
0 2019-11-12 01:45:05
I had this problem when missing a closing tag in the html.我在 html 中缺少结束标记时遇到了这个问题。
So instead of:所以而不是：
<table></table>
..my HTML was ..我的 HTML 是
<table>...<table>
Tried to load jQuery after angular as mentioned above.如上所述，尝试在 angular 之后加载 jQuery。 This prevented the error message, but didn't really fix the problem.这阻止了错误消息，但并没有真正解决问题。 And jQuery '.find' didn't really work afterwards..之后 jQuery '.find' 并没有真正起作用..
Solution was to fix the missing closing tag.解决方案是修复丢失的结束标记。
解决方案22
-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.几个小时后，我注意到我的 .JSON 文件中有一个额外的逗号，位于最后一个键值对上。
//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"
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.