警告：尝试多次加载Angular。Angular JS

Question

警告：尝试多次加载Angular。Angular JS

javascriptangularjsgruntjs

49

运行 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: '/'
      });
  }]);

- Vishal Sakaria

你的文件中是否有任何被注释掉的脚本标签？ - gkalpak

嘿@VishalSakaria，你介意选择被接受的答案吗？ - jhohlfeld

23个回答

31

这个问题是由于将当前页面用作templateUrl而引起的。这种情况尤其棘手，因为它会导致无限循环反复引用自己。

如果你遇到了导致页面崩溃的无限循环，很可能就是这个原因。如果你遇到了CORS错误，则可能是由于在模板中包含来自另一个域的脚本标签所致。

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

- Kevin Beal

哦！这个救了我的一天...我刚才一直在看控制台日志。当应用程序加载时，它会加载 localhost:9000/app/main/main.html，当转到另一个路由时，它使用的是localhost:9000/other.html，但无法获取它并且不断循环。 - Naveen

1

你的回复让我检查了我的 URL，才发现原来是有一个笔误！ - Manatax

2

请注意，如果您正在使用自动构建系统，请检查模板是否存在于应有的位置。如果您的服务器对于每个缺失的资源都响应索引页面，则您将遇到无限的角度加载循环。我强烈建议配置服务器不要对于缺失的模板响应索引页面！ - Ruslan Zhomir

我的图像（template）确实存在于我用来调用templateUrl的相同路径中，所以错误仍然存在...不过我认为这可能与此有关。还有其他建议吗？ - Omar

13

因为我的index.html位于不同的根目录结构下，所以我的templateUrl路径错误导致了这个问题。尝试仅使用template而不是templateUrl来测试URL路径。

将一个图像放在你的views文件夹中，然后尝试这样做。

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

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

你应该能够在你的首页上看到“测试模板”和图像显示。如果图像没有显示出来，那么你的路径可能是错误的。

您应该在主页上看到“测试模板”以及图片的显示。如果图片未显示，则路径错误。

- Blake Bowen

2

啊，我又遇到了同样的错误，但这一次，经过长时间的挣扎后，发现是 templateUrl 路径中有一个拼写错误。更有趣的是，对于相同的拼写错误，如果 replace: false，你会得到这个错误。否则，如果 replace:true，你会得到这样的错误：Error: [$compile:tplrt] Template for directive 'xxChart' must have exactly one root element. /app/directive/xxChart.html。真傻。 - newman

我之前在routes.conf文件中未能添加一条路由，将对ng-table模板的请求映射到path="/public/ng-table"，因为它找不到这个路由，所以每次请求模板时都会返回index.scala.html。我所做的只是添加了一行代码 GET /ng-table/*file controllers.Assets.at(path="/public/ng-table", file)，问题就解决了。 - Alessandro

7

我遇到了同样的问题。但在我的情况下，webpack打包了两个不同版本的Angular（Angular 1.5.5和Angular 1.5.0）。

- fernando

2

我在使用webpack时遇到了同样的问题，但是angular的版本是相同的，一个在我的主要代码块中，另一个在我的供应商代码块中。 - Ben Anderson

3

通过将post.html移动到partials并将templateUrl更改为partials/posts.html，我解决了这个问题。我认为这可能是由于我使用的angular fullstack Yo脚手架导致的，因为在另一个项目中可以正常工作。无论如何，还是谢谢。

- Vishal Sakaria

这基本上是我遇到的同样问题。问题在于我在templateURL中拼写了模板名称错误。 - Garry Polley

2

你必须更改angular的路由'/'！这是一个问题，因为'/'基础url请求。如果你改变'/'=>'/home'或'/hede'，angular会良好地工作。

示例：

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

- Salih KARAHAN

2

在我的情况下，警告的原因是在 "angular.js" 之后重复包含了 "angular-scenario.js" 脚本。

当我移除了 "angular-scenario.js" 后，警告消失了。

- Halis S.

这也是我的问题，只有在我更新到AngularJS 1.5.8之后才发生。 - Alberto Rechy

2

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

我想补充一点，以帮助找到错误（不适用于错误的ng-app情况）。

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

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

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

简而言之：检查服务器日志，查看打开页面时调用的路径，错误证据可能在那里找到。

- Lattanzio

2

问题实际上与Angular库被加载了太多次有关。

我的回答可能听起来太明显了，但代码本身没问题，也没有太多关于问题的信息。如果你能发布你的文件夹树，也许会有用。

在此期间，请确保在进一步调查之前满足以下两个条件：

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

- Francesco

1

我最近遇到了这个错误，解决方法是进入Web.config文件并将 <compilation debug="false" targetFramework="4.5.2"/> 改为 <compilation debug="true" ... />。希望能对某些人有所帮助！干杯！

- DDelgro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jhohlfeld · Accepted Answer

在我的情况下，这是由于以下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> 标签未闭合。这导致了我遇到的 'WARNING: Tried to load angular more than once.' 问题。