Question

我正在尝试在运行Grunt Build后查看我的应用。我使用grunt serve：dist来查看所有生产就绪的构建，但在浏览器中我得到一个无限循环说：

警告：尝试多次加载角度。

我已经读过这个，因为在连接之后TemplateURL：可能是错误的。如在这篇文章中： Tried to Load Angular More Than Once

但我该如何解决这个问题呢？这是我的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: '/'
      });
  }]);

Answer 1

在我的情况下，这是由于以下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>

如您所见，<main>未关闭。这导致我的变种＆＃39;警告：尝试不止一次加载角度。＆＃39; 问题。

Answer 2

使用当前页面作为templateUrl也会导致此问题。这尤其成问题，因为它会导致无限循环一遍又一遍地引用自身。

如果您遇到崩溃页面的无限循环，可能就是这样。如果您收到CORS错误，可能是因为在模板中包含了来自其他域的脚本标记。

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

Answer 3

我遇到了这个问题，因为我的templateUrl路径错误，因为我的index.html处于不同的根结构中。尝试使用template代替templateUrl来测试网址路径。

将图像放入views文件夹，然后尝试此操作。

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

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

您应该看到＆＃34;测试模板＆＃34;并且图像显示在索引页面上。如果图像没有显示，那么您的路径就错了。

Answer 4

我遇到了同样的问题。但就我而言，使用webpack构建了两个不同的Angular版本（Angular 1.5.5和Angular 1.5.0）。

Answer 5

是的，我通过将post.html移动到partials并将templateUrl更改为partials / posts.html来对其进行排序。我想这可能是由于我使用的Yo支架是角度全栈，因为它可以很好地看到项目。不管怎样，谢谢

Answer 6

你必须改变角度路线'/'！这是一个问题，因为'/'基本网址请求。如果您更改'/'=＆gt; '/ home'或'/ hede'angle将会很好的工作。样品：

Module.Js：

var application = angular.module('flow', ['ngRoute', 'ngResource']);

RouteConfig.Js：

angular.module('flow')
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/home', { templateUrl: '/home/index', controller: 'HomeController' })
            .when('/error', { templateUrl: '/Error/Index', controller: 'ErrorController' })
            .when('/login', { templateUrl: '/Account/Login', controller: 'AccountController' });
    }]);

Answer 7

我确认以上所有内容（通常是路由错误或资源路径上的某些错误或ng-app错误）。

我想只添加一点来帮助找到错误（不是在错误的ng-app的情况下）。

如果我们假设角度服务器设置如下：

/ static / *表示所有静态资源（js，css，png ...）
/ api / * rest api
/ *所有其他人的电话将重定向到index.html

通过这种方式，所有错误的路径都将返回index.html而不是png，css，js和tpl文件，即使缺少/ static / path或者缺少返回404以查找丢失的静态资源。

简而言之：检查登录服务器上的女巫路径你打电话打开页面，可以在那里找到错误证据。

Answer 8

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

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

与此同时，在进一步调查之前，请确保这两件事情还可以：

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

Answer 9

在我的情况下，警告的原因是在“angular.js”之后包含“angular-scenario.js”的冗余脚本。

当我删除“angular-scenario.js”时，警告消失了。

Answer 10

由于使用的是webpack + AngularJS，我们遇到的问题/修复可能会有些独特。

我们正在使用html-webpack-plugin。但是，我们的index.html文件也有

<script type="text/javascript" src="./bundle.js"></script>

html-webpack-plugin自动添加该行，因此它在我们的结果HTML中出现了两次。

Answer 11

我遇到了这个问题，发现该问题发生在我的karma.conf.js文件中。

在指定要加载到浏览器中的文件模式时，我使用通配符标识符来加载AngularJS，如下所示：

'path_to_angular/angular/*.js

如果该目录中有多个文件加载AngularJS，例如angular.js和angular.min.js，则将引发此错误。

为避免此错误，只需指定一个没有通配符的路径。

'path_to_angular/angular/angular.js'

或

'path_to_angular/angular/angular.min.js'

应该可以解决问题。

Answer 12

上次这发生在我身上，它是一个路线的templateUrl中的前导'/'，而不是假设在那里。

这一次，在构建之后，一堆视图没有被渲染到模板缓存中，因为我已将这些视图放在views文件夹下的子文件夹的子文件夹中。 Gruntfile.js未调整为从'/ views'中获取第3级文件夹。

要找出在yo-grunt构建中呈现的内容，可以在构建完成后查看.tmp / templateCache.js。

我希望AngularJS LTS的团队能够找到一种更好地处理这种错误的方法，并提供一些更好的线索来解决问题所在。

希望这有帮助！

Answer 13

只是为此问题添加一个可能的方案......

行为：从根网址加载后一切正常，但每当从任何其他路线加载页面（或进入其他路线）时都会遇到此问题。

可能的原因：您的一个嵌套组件或页面正在从相对路径而不是绝对路径加载某些内容。

在我的情况下，它必须与引用的组件一起加载其模板的相对路径。

因此，例如改变：

angular.
  module('app').
  component('profileSelect', {
    // this line was the problem
    templateUrl: 'static/angular/profiles/profile-select.html',
    bindings: {}
  });

到此：

angular.
  module('app').
  component('profileSelect', {
    // making this an absolute path fixes it
    templateUrl: '/static/angular/profiles/profile-select.html',
    bindings: {}
  });

解决了它。基本上因为你现在有子路径，那些相对引用不再起作用，而角度决定以这种令人难以置信的难以破译的方式失败。

希望有人能得到这个答案的帮助。我刚刚失去了一小时以上的生命......

Answer 14

在我的情况下app-view-segment="1"丢失，并且在@Scripts.Render行中有两个引用指向index.cshtml文件中相同的angular文件夹。感谢您指向角度路由。

Answer 15

我们无意中尝试在ui-view中加载不存在的路线。但是，该路由确实对应于包含Angular应用程序的有效URL。它将Angular应用程序加载到ui-view中，因此加载了Angular的多个副本。

Answer 16

在我的情况下，模板文件（不是字符串）是空的。当我用简单的html填充模板文件时，问题已经解决了。使用一些代码填充views/posts.html。

Answer 17

这种情况是代码以某种方式进行无限循环。确保验证代码中是否存在多次重定向的重定向。

Answer 18

在我的情况下，角度库和我的角度模块代码动态加载到另一个我没有任何控制的应用程序中。这些是在点击按钮时加载的。这是第一次工作正常但是当用户第二次点击库和其他文件再次加载时它会给我警告。

警告：尝试不止一次加载角度。

var isInitialized = element.injector();
if (!isInitialized) {
  angular.bootstrap(angular.element(document.getElementById('#mainDiv')), ['defaultApp']);
}

Answer 19

在我的情况下，问题与AngularJS Batarang Chrome Extension（版本0.7.1）有关。一旦我禁用了扩展程序，错误就消失了。

Answer 20

您的解决方案可能在本地工作，例如，如果您正在运行的grunt服务，但是当您运行grunt构建时，您的视图可能不会包含在dist目录中。例如，如果您有一个视图，并且该视图位于视图＆gt;模板＆gt; 模块中，则 两个级别 默认情况下运行grunt build时不会添加。至少对我来说就是这种情况。检查您的html文件是否包含在视图中的dist目录中。如果它不是手动添加文件以验证它是否有效，那么请相应地更新您的grunt文件。

Answer 21

在我的情况下，它是index.html中无效的资源链接

<link rel="import" href="/somethingmissing.html">

Answer 22

我遇到了同样的问题，这就是我降落在这里的原因。但是，没有一个答案对我有用。事实证明，代码没有任何问题，浏览器网址是罪魁祸首：它应该是localhost:3000/#/，但不知怎的，我在浏览器中得到了类似localhost:3000/xxx/public/index.html/#/的内容。顺便说一句，如果重要的话，我在WebStorm中使用带有node.js的ui-router。

警告：试图加载角度不止一次。 Angular JS

22 个答案: