堆栈内存溢出
  繁体   English   中英

尝试多次加载 Angular

[英]Tried to Load Angular More Than Once

 原文  2014-03-23 19:26:15  3   22    javascript/ angularjs/ gruntjs

问题描述

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

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 个解决方案

解决方案1
 146 已采纳  2014-03-24 16:45:18

这可能是许多问题：本质上是 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 在构建后出错，但之前没有。

解决方案2
 18  2014-07-22 11:11:33

当 $templateCacheProvider 尝试解析 templateCache 中的模板或通过不存在的项目目录时，可能会出现此问题

例子：

templateUrl: 'views/wrongPathToTemplate'

应该：

templateUrl: 'views/home.html'

解决方案3
 15  2014-03-24 04:40:55

这与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 上的相关 Angular 代码。

解决方案4
 14  2015-02-25 18:41:45

似乎没有人在任何地方提到过这一点，所以这就是触发它的原因：我的身体上有 ng-view 指令。 像这样改变它

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

停止了错误。

解决方案5
 8  2017-09-20 16:29:09

我也面临这样一个问题，我不断地进入无限循环，页面无限地重新加载。 经过一些调试后，我发现错误是由于 angular无法加载具有特定 id 的模板，因为该模板不存在于该文件中。

请注意您在 Angular 应用程序中提供的 url。 如果它不正确，angular 最终只能继续寻找它，导致无限循环！

希望这可以帮助！

解决方案6
 6  2014-11-18 10:54:46

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

解决方案7
 6  2015-04-17 09:23:18

在我的情况下，我在页面上使用 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>

我删除了 ：

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

然后警告消失了。

解决方案8
 5  2016-07-24 15:10:06

今天遇到了这个问题，我想我会发布我是如何修复它的。 就我而言，我有一个 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 的无限递归加载（每次加载角度库）。

要解决我所要做的就是从 routProvider 中删除 index.html - 如下：

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

解决方案9
 2  2014-10-28 07:15:26

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

解决方案10
 2  2017-05-22 18:59:56

我在代码笔上遇到了这个问题，结果证明这只是因为我在 Angular 之前加载了 JQuery。 不知道其他情况下能不能用。

解决方案11
 1  2015-01-14 07:17:17

大小写也很重要！ 在我的指令中，我尝试指定：

templateUrl: 'Views/mytemplate'

并收到“不止一次”警告。 当我将其更改为时，警告消失了：

templateUrl: 'views/mytemplate'

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

解决方案12
 1  2015-03-16 23:43:32

这也发生在我身上 .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();
    }
}

解决方案13
 1  2017-03-12 01:47:09

我遇到了同样的问题（“尝试多次加载 Angular”），因为我在 index.html 中包含了两次 angularJs 文件（没有感知）。

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

解决方案14
 1  2017-05-20 11:02:31

我有同样的问题，因为我在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解决了这个问题。

解决方案15
 0  2014-11-03 00:05:21

你必须改变角度路线'/'！ 这是一个问题，因为 '/' 基本 url 请求。 如果您更改 '/' => '/home' 或 '/hede' angular 会很好地工作。

解决方案16
 0  2016-05-11 04:31:57

对于将来遇到此问题的任何人，对我来说，它是由箭头函数而不是run块中的函数文字引起的：

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

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

解决方案17
 0  2016-07-23 18:06:20

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

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

解决方案18
 0  2016-10-19 23:57:25

另一种情况是Webpack将 angular 连接到 bundle.js 中，除了从 index.html <script>标签加载的 angular。

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

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

所以，webpack 也决定捆绑它。 将所有这些清理成：

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

正在修复Tried to Load Angular More Than Once多次Tried to Load Angular More Than Once一劳永逸。

解决方案19
 0  2017-02-23 17:05:30

我的问题是以下行（HAML）：

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

请注意，我有一个有角度的ng-click并且我有一个href标签，它将跳转到#同一个页面。 我只需要删除href标签就可以了。

解决方案20
 0  2018-08-02 12:15:22

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

解决方案21
 0  2019-11-12 01:45:05

我在 html 中缺少结束标记时遇到了这个问题。

在此处输入图片说明

所以而不是：

<table></table>

..我的 HTML 是

<table>...<table>

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

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

解决方案22
 -1  2015-02-06 05:45:17

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

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

然后我把它取下来（最后一个','）就解决了这个问题。

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 试图在离子上多次加载角度 警告：尝试多次加载角度 警告：尝试在页面加载期间多次加载角度 试图在Angular js中多次加载angular 警告：试图加载角度不止一次。 Angular JS 警告：试图加载角度不止一次...因为jQuery ...为什么？ 视图未注入或警告：试图多次加载角度 AngularJS尝试多次加载 Angular内部的Angular-解决：警告：试图多次加载角度 警告：试图多次加载角度。 角+离子+需要JS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM