警告：试图加载角度不止一次。 Angular JS
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了警告：试图加载角度不止一次。 Angular JS相关的知识，希望对你有一定的参考价值。
我试图在运行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: '/'
});
}]);
在我的情况下，这是由于以下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>没有关闭。这导致了我的变种'警告：尝试不止一次加载角度。问题。
我最近得到了这个错误，我解决它的方式是进入Web.config并将<compilation debug="false" targetFramework="4.5.2"/>更改为<compilation debug="true" ... />我希望这有助于某人！干杯!
您的解决方案可能在本地工作，例如，如果您正在运行的grunt服务，但是当您运行grunt构建时，您的视图可能不会包含在dist目录中。例如，如果您有一个视图，并且该视图位于views> templates> modules中，则默认情况下运行grunt build时，不会添加两个以上的级别。至少对我来说就是这种情况。检查您的html文件是否包含在视图中的dist目录中。如果它不是手动添加文件以验证它是否有效，那么请相应地更新您的grunt文件。
在我的情况下，问题与AngularJS Batarang Chrome Extension（版本0.7.1）有关。一旦我禁用了扩展程序，错误就消失了。
在我的情况下，角度库和我的角度模块代码动态加载到另一个我没有任何控制的应用程序中。这些是在点击按钮时加载的。它第一次工作正常，但当用户第二次点击库和其他文件再次加载时，它给了我警告。
警告：试图加载角度不止一次。
var isInitialized = element.injector();
if (!isInitialized) {
angular.bootstrap(angular.element(document.getElementById('#mainDiv')), ['defaultApp']);
}
这种情况是代码以某种方式进行无限循环。确保验证代码中是否存在多次调用的重定向。
在我的例子中，模板文件（不是字符串）是空的。当我用简单的html填充模板文件时，问题已经解决了。用一些代码填写views/posts.html。
我们不小心试图在ui-view中加载一条不存在的路线。但是，该路由确实对应于包含Angular应用程序的有效URL。它反而将Angular应用程序加载到ui-view中，因此Angular的多个副本。
在我的情况下，app-view-segment="1"丢失，并且有两个引用指向index.cshtml文件中@Scripts.Render行中相同的angular文件夹。感谢您指向角度路由。
只是为这个问题增加一个可能的场景......
行为：从根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: {}
});
解决了它。基本上因为你现在有子路径，那些相对引用不再起作用，而角度决定以这种令人难以置信的难以破译的方式失败。
希望有人能得到这个答案的帮助。我刚刚失去了一小时以上的生命......
上次这发生在我身上，它是一个路线的templateUrl中的一个前导'/'，它不应该在那里。
这一次，在构建之后，一堆视图没有被渲染到模板缓存中，因为我将这些视图放在views文件夹下的子文件夹的子文件夹中。 Gruntfile.js没有调整为从'/ views'中获取第三级文件夹。
要找出在yo-grunt构建中呈现的内容，可以在构建完成后查看.tmp / templateCache.js。
我希望AngularJS LTS的团队能够找到一种方法来更好地处理这种错误，并提供一些更好的线索来解决问题所在。
希望这可以帮助！
使用当前页面作为templateUrl也会导致此问题。这尤其成问题，因为它会导致无限循环一遍又一遍地引用自身。
如果你得到一个无限循环崩溃你的页面，它可能就是这样。如果您收到CORS错误，可能是因为在模板中包含了另一个域的脚本标记。
$routeProvider.when('/', {
templateUrl: 'an/absolute/url/to/the/current/page.html'
});
我遇到了这个问题，发现问题发生在我的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'
应该做的伎俩。
我遇到了同样的问题，这就是我降落在这里的原因。但是，没有一个答案对我有用。事实证明，代码没有任何问题，浏览器网址是罪魁祸首：它应该是localhost:3000/#/，但不知何故，我在浏览器中得到了类似localhost:3000/xxx/public/index.html/#/的内容。顺便说一下，如果重要的话，我在WebStorm中使用带有node.js的ui-router。
在我的情况下，它是index.html中的无效资源链接
<link rel="import" href="/somethingmissing.html">
我有这个问题，因为我的templateUrl路径是错误的，因为我的index.html处于不同的根结构。尝试使用template而不是templateUrl测试URL路径。
将图像放在views文件夹中，然后尝试这个。
$routeProvider.when('/', {
template: 'Test Template <img src="views/pic.jpg"/>',
controller: 'PostsCtrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
您应该看到“测试模板”，图像显示在索引页面上。如果图像没有显示，则表明您的路径错误。
我遇到了同样的问题。但就我而言，使用webpack构建了两个不同的Angular版本（Angular 1.5.5和Angular 1.5.0）。
是的我通过将post.html移动到partials并将templateUrl更改为partials / posts.html来对其进行排序。我想这可能是由于我使用的Yo支架是角度全栈，因为它可以很好地看到项目。不管怎么说，还是要谢谢你
问题实际上与角度库被加载太多次有关。
我的回复听起来太明显了，但是代码本身很好，并且关于问题可能没有太多信息。如果您可以发布您的文件夹树，也许它可能是有用的。
与此同时，在进一步调查之前，请确保这两件事情还可以：
- views / posts.html不包含调用angular.js库的脚本标记。
- views / posts.html文件在该位置可用（可能使用完整的URI）。
我确认以上所有内容（通常是路由错误或资源路径上的某些错误或ng-app错误）。
我想只添加一点来帮助找到错误（不是在错误的ng-app的情况下）。
如果我们假设角度服务器设置如下：
- / static / *表示所有静态资源（js，css，png ...）
- / fire / * fire rest
- / *所有其他调用将重定向到index.html
这样，所有错误的路径都将返回index.html而不是png，css，js和tpl文件，即使缺少/ static / path或者miss也缺少静态资源返回404。
简而言之：检查登录服务器上的巫婆路径是否正在调用打开页面，可以在那里找到错误证据。
你必须改变角度路线'/'！这是一个问题，因为'/'基本网址请求。如果你改变'/'=>'/ 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' });
}]);
在我的情况下，警告的原因是在“angular.js”之后包含“angular-scenario.js”的冗余脚本。
当我删除“angular-scenario.js”时警告消失了。
以上是关于警告：试图加载角度不止一次。 Angular JS的主要内容，如果未能解决你的问题，请参考以下文章