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

【问题标题】：WARNING: Tried to load angular more than once. Angular JS警告：尝试多次加载角度。角JS
【发布时间】：2014-06-23 08:54:18
【问题描述】：

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

警告：尝试多次加载 Angular。

我已经读过这是因为 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: '/'
      });
  }]);

【问题讨论】：

您的文件中是否碰巧有任何注释掉的脚本标签？
嘿@VishalSakaria，你介意选择接受的答案吗？

标签： javascript angularjs gruntjs

【解决方案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> 没有关闭。这导致了我的 “警告：尝试多次加载 Angular。”的变体。 问题。

【讨论】：

我在使用 ng-include 时遇到了同样的问题 - 感谢您指出！
谢谢，您在找错地方时为我节省了很多时间。我将一堆文件连接在一起以制作 1 个 HTML 页面。一页中的 HTML 格式错误并导致了问题。
ng-bind 和 ng-bind-html 可能会导致同样的错误
您先生，是救生员！鞠躬
我在带有 HTML5 文档类型的页面上使用 <ng-view /> 也收到此错误，并切换到 <ng-view></ng-view> 删除了警告。

【解决方案2】：

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

如果您遇到导致页面崩溃的无限循环，则可能是这样。如果您收到 CORS 错误，可能是由于在您的模板中包含了来自另一个域的脚本标记。

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

【讨论】：

哦！这节省了我的一天。我实际上看到了控制台日志。当应用程序加载时，它会加载 localhost:9000/app/main/main.html，当转到另一个路由时，它会加载为 localhost:9000/other.html，但它没有得到，并一直循环。
你的回复让我检查了我的网址，发现我有错字！
并检查您的模板是否存在于它必须存在的地方，尤其是如果您使用的是自动构建系统。如果您的服务器响应每个缺失资源的索引页，那么您将获得无限角度加载循环。我强烈建议配置服务器不响应缺少模板的索引页面！
我的图像 (template) 确实存在于我用来调用 templateUrl 的同一路径中，因此错误仍然存在......我认为它与此有关。还有其他建议吗？

【解决方案3】：

我遇到了这个问题，因为我的templateUrl 路径错误，因为我的index.html 位于不同的根结构中。尝试仅使用 template 而不是 templateUrl 来测试 URL 路径。

在您的views 文件夹中放置一张图片，然后试试这个。

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

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

您应该会看到“测试模板”，并且图像会显示在您的索引页面上。如果图片没有显示出来，你的路径是错误的。

【讨论】：

啊，我又遇到了同样的错误，但这一次，经过长时间的努力，这是由于 templateUrl 路径中的拼写错误。更有趣的是，对于相同的拼写错误，如果 replace: false 会出现此错误。否则，如果replace:true，您将收到如下错误：Error: [$compile:tplrt] Template for directive 'xxChart' must have exactly one root element. /app/directive/xxChart.html。傻。
我未能将路由添加到我的 routes.conf 文件中，该文件将 ng-table 模板的请求映射到 path="/public/ng-table" 并且因为它没有找到它的路由为每个请求的模板发送 index.scala.html。我所做的只是添加GET /ng-table/*file controllers.Assets.at(path="/public/ng-table", file) 行并修复它

【解决方案4】：

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

【讨论】：

我在使用 webpack 时遇到了同样的问题，但是 Angular 的版本相同，一个在我的主块中，另一个在我的供应商块中

【解决方案5】：

是的，我通过将 post.html 移动到 partials 并将 templateUrl 更改为 partials/posts.html 来解决它。我认为这可能是由于我使用的 Yo 脚手架是 angular fullstack，因为它在 see 项目中运行良好。还是谢谢

【讨论】：

这与我遇到的问题基本相同。问题是我在 templateURL 中拼错了我的模板名称。

【解决方案6】：

这个问题实际上与加载太多的角度库有关。

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

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

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

【讨论】：

【解决方案7】：

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

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

如果我们假设 Angular 的服务器设置如下：

/static/* 用于所有静态资源（js、css、png...）
/api/* 休息api
/* 所有其他调用将被重定向到 index.html

这样所有错误路径都会返回 index.html 而不是 png、css、js 和 tpl 文件，即使缺少 /static/ 路径或因缺少静态资源而返回 404。

简而言之：检查服务器巫婆路径上的日志，您是否调用打开页面，在那里可以找到错误证据。

【讨论】：

【解决方案8】：

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

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' });
    }]);

【讨论】：

【解决方案9】：

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

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

【讨论】：

这也是我的问题，它只是在我更新到 AngularJS 1.5.8 后才发生

【解决方案10】：

我最近遇到了这个错误，我解决它的方法是进入 Web.config 并更改 <compilation debug="false" targetFramework="4.5.2"/> 到<compilation debug="true" ... /> 我希望这可以帮助别人！干杯！

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

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

警告：尝试多次加载 angular。

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

【讨论】：

【解决方案14】：

这种情况是代码以某种方式进入无限循环。确保验证您的代码中是否有任何被多次调用的重定向。

【讨论】：

【解决方案15】：

在我的例子中，模板文件（不是字符串）是空的。当我用简单的html填充模板文件时，问题就解决了。用一些代码填充views/posts.html。

【讨论】：

【解决方案16】：

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

【讨论】：

【解决方案17】：

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

【讨论】：

【解决方案18】：

只是为了给这个问题增加一个可能的场景......

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

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

在我的例子中，它与使用相对路径加载其模板的引用组件有关。

所以，例如从这个改变：

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: {}
  });

解决了。基本上是因为您现在有子路径，这些相对引用不再起作用，并且 angular 决定以这种难以置信的难以破译的方式失败。

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

【讨论】：

【解决方案19】：

上次发生在我身上时，它是路由的 templateUrl 中的前导“/”，本不应该存在。

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

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

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

希望这会有所帮助！

【讨论】：

【解决方案20】：

我遇到了这个问题，发现问题出现在我的 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'

应该可以解决问题。

【讨论】：

【解决方案21】：

我们遇到的问题/修复可能有点独特，因为我们使用的是 webpack + AngularJS。

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

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

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

【讨论】：

【解决方案22】：

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

【讨论】：

【解决方案23】：

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

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

【讨论】：