试图加载angular度不止一次

我有一个yeoman脚手架的应用程序(angular度的fullstack发电机)。

grunt serve工作正常,但grunt build生成产生一个分配locking内存,最有可能是因为angular度循环引用。

我升级到1.2.15 。 我得到的错误是:

WARNING: Tried to Load Angular More Than Once

在升级之前,错误是:

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

debugging非常困难,因为只有在编译/缩小之后才会发生。 我所有的模块都是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'); 

这可能是一些问题:本质上这是一个routeProvider没有find一个文件,并recursion加载默认的问题。

对我来说,事实certificate,这不是微缩,而是js的串联导致的问题。

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

你会注意到,如果应用程序找不到文件( otherwise ),那么它将redirect到根,在这种情况下加载templateUrl 。 但是,如果你的templateUrl是错误的,那么它会导致recursion重新加载index.html反复加载angular度(和其他)。

在我的情况下,grunt-concat导致templateUrl在构build之后出错,但之前没有。

当我忘记为视图添加“.html”时,我遇到了这个问题。

例:

 templateUrl: 'views/home' 

应该:

 templateUrl: 'views/home.html' 

似乎没有人提到过这个地方,所以这就是触发它的原因:我的身体上有ng-view指令。 像这样改变它

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

停止了错误。

这与app.js完全没有关系。 相反,当您多次包含Angular JS库时会logging此警告。

我已经设法重现这个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上的相关的Angular代码。

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

在我的情况下,我得到了这个错误,同时在页面上使用jQuery和angularjs。

 <script src="ajax/jQuery/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="ajax/jQuery/jquery-2.1.3.min.js" type="text/javascript"></script> 

警告消失了。

今天有这个问题,并认为我会张贴如何修复它。 在我的情况下,我有一个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 ..等等 – 创buildindex.html的无限recursion加载(每次加载angular库)。

解决所有我必须做的是从routProvider删除index.html – 如下所示:

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

我有一个类似的问题,对我来说,这个问题是由于在控制器中丢失了一些分号。 应用程序缩小可能导致代码执行不正确(很可能导致的代码导致状态突变,导致视图呈现,然后控制器再次执行代码,等recursion)。

我在代码笔上遇到了这个问题,结果就是因为我在Angular之前加载了JQuery。 不知道是否可以申请其他案件。

资本化也很重要! 在我的指令里面,我试着指定:

 templateUrl: 'Views/mytemplate' 

并得到了“不止一次”的警告。 当我将其更改为:警告消失

 templateUrl: 'views/mytemplate' 

纠正我,但我认为这是因为我放置指令的页面是在pathconfigurationfunction“视图”下,而不是“视图”。

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

我有同样的问题(“试图加载angular多次”),因为我已经在我的index.html中包含两次angularJs文件(不知道)。

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

我也遇到了这样一个问题,我一直在无限循环,页面无限重载。 经过一些debugging后,我发现错误是由于,angular度无法加载给定的特定id的模板,因为该模板不存在于该文件中。

小心你在angular度应用中给的url。 如果不正确的话,angular度可能会持续在最后寻找,导致无限循环!

希望这可以帮助!

你必须改变angular度路线'/'! 这是一个问题,因为“/”基地址的请求。 如果你改变'/'=>'/ home'或者'/ hede',angular度会很好。

我有完全相同的错误。 几个小时之后,我注意到在我的.JSON文件中,在最后一个键值对上有一个额外的逗号。

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

然后我把它拿走了(最后一个','),这就解决了这个问题。

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

对于将来有这个问题的人来说,对我来说,这是由一个箭头函数引起的,而不是在run块中的函数字面量引起的:

 // bad module('a').run(() => ...) // good module('a').run(function() {...}) 

在我的情况下,我有index.htmlembedded2视图,即view1.html和view2.html。 我开发了这两个独立于index.html的视图,然后试图embedded使用路由。 所以我有2视图的HTML文件中定义的所有脚本文件,这是导致此警告。 从视图中删除包含angularJS脚本文件后,此警告消失。

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

另一种情况是使用Webpack ,它将angular度级联到bundle.js中,旁边是从index.html <script>标签加载的angular度。

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

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

所以,webpack也决定捆绑它。 把所有这些清理成:

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

正在修复Tried to Load Angular More Than Once不止一次一次和所有。

我的问题是以下行(HAML):

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

请注意,我有一个angular度ng-click和我有一个href标记将跳转到#是同一页面。 我只需要删除href标签,我很好走。

我有同样的问题,因为我在index.html有两个angular

 <script src="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解决了这个问题。