警告:试图加载角度不止一次.Angular JS

Question

警告:试图加载角度不止一次.Angular JS

Vis*_*ria 47 javascript angularjs gruntjs

我试图在运行Grunt Build后查看我的应用程序.我使用grunt serve:dist来查看所有生产就绪的构建但是在浏览器中我得到一个无限循环说:

警告:试图加载角度不止一次.

我已经读过这个,因为在连接之后TemplateURL:可能是错误的.正如在这篇文章中: 试图加载Angular多次

但是我该如何解决这个问题呢？这是我的app.js

/* global libjsapp:true */


'use strict';

var libjsapp = angular.module('libjsApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute'
]);

libjsapp.config(['$routeProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/posts.html',
        controller: 'PostsCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

Run Code Online (Sandbox Code Playgroud)

Answer 1

jho*_*eld 39

在我的情况下,这是由于以下HTML代码:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testapp</title>
</head>

<body ng-app="testApp">

  <main ui-view>

  <script src="bower_components/jquery/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

  <script src="scripts/main.js"></script>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

如您所见,<main>未关闭.这导致了我的变种'警告:尝试不止一次加载角度.问题.

我在带有HTML5 doctype的页面上使用`<ng-view />`得到了这个错误,并切换到`<ng-view> </ ng-view>`删除了警告. (5认同)
我有同样的问题与ng-include - 感谢指出它! (3认同)

Answer 2

Kev*_*eal 31

此问题也是由于使用当前页面引起的templateUrl.这尤其成问题,因为它会导致无限循环一遍又一遍地引用自身.

如果你得到一个无限循环崩溃你的页面,它可能就是这样.如果您收到CORS错误,可能是因为在模板中包含了另一个域的脚本标记.

$routeProvider.when('/', {
   templateUrl: 'an/absolute/url/to/the/current/page.html'
});

Run Code Online (Sandbox Code Playgroud)

并检查您的模板是否存在于必须的位置,尤其是在使用_automated build system_时.如果您的服务器响应每个缺失资源的索引页面,那么您将获得无限角度加载循环.我强烈建议配置服务器**不要使用索引页面来回复缺少的模板**! (2认同)

Answer 3

Bla*_*wen 12

我有这个问题,因为我的templateUrl路径错了,因为我index.html处于不同的根结构中.尝试使用template而不是使用测试URL路径templateUrl.

将图像放在您的views文件夹中,然后尝试此操作.

$routeProvider.when('/', {
   template: 'Test Template <img src="views/pic.jpg"/>',
   controller: 'PostsCtrl'
});

$routeProvider.otherwise({ redirectTo: '/' });

Run Code Online (Sandbox Code Playgroud)

您应该看到"测试模板",图像显示在索引页面上.如果图像没有显示,则表明您的路径错误.

啊，我又遇到了同样的错误，但是这一次，经过长时间的挣扎，结果是由于 templateUrl 路径中的拼写错误。更有趣的是，对于同样的拼写错误，如果`replace: false`，你会得到这个错误。否则，如果`replace:true`，你会得到这样的错误： `Error: [$compile:tplrt] 指令'xxChart' 的模板必须正好有一个根元素。/app/directive/xxChart.html`。愚蠢的。 (2认同)

Answer 4

fer*_*ndo 6

我遇到了同样的问题.但就我而言,使用webpack构建了两个不同的Angular版本(Angular 1.5.5和Angular 1.5.0).

我对 webpack 有同样的问题，但 angular 的版本相同，一个在我的主块中，另一个在我的供应商块中 (2认同)

Answer 5

小智 2

该问题实际上与角度库加载次数过多有关。

我的回复听起来太明显了，但代码本身很好，并且没有太多关于问题所在的信息。如果您可以发布您的文件夹树，也许它会很有用。

同时，在进一步调查之前，请确保这两件事没问题：

views/posts.html 不包含调用 angular.js 库的脚本标记。
views/posts.html 文件在该位置可用（也许使用完整的 URI）。

归档时间：	11 年，5 月前
查看次数：	71317 次
最近记录：	6 年，1 月前