Angular 1 之上的 jQuery 依赖项：警告：尝试多次加载 Angular答案

【问题标题】：jQuery dependency above Angular one: WARNING: Tried to load angular more than onceAngular 1 之上的 jQuery 依赖项：警告：尝试多次加载 Angular
【发布时间】：2015-05-21 19:01:55
【问题描述】：

我正在处理 Yeoman Angular 生成的文件夹。我通过 Bower 安装了一个需要 jQuery 的模块。 Grunt 的wiredep 将jQuery 依赖放在了index.html 中的AngularJS 之上，如下：

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
...
<!-- endbower -->
<!-- endbuild -->

这似乎是合理的，因为 jQuery 不依赖于 Angular。

问题是当我尝试在浏览器中加载我的应用程序时，我在 JS 控制台中收到以下消息：

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM80711:26293 
WARNING: Tried to load angular more than once.

angular-animate.js:442 Uncaught TypeError: Cannot read property 'offsetWidth' of null

如果我手动将jQuery 依赖项与index.html 的angular 交换，一切都像魅力一样，但是当我grunt build 我的应用程序时，默认顺序已设置，所以我无法获得dist 文件夹中的工作配置。

bower.json:

{
  "name": "webapp",
  "version": "0.1.0",
  "dependencies": {
    "angular": "^1.3.0",
    "angular-animate": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0",
    "angular-ui-router": "~0.2.14",
    "angular-material": "~0.9.0",
    "restangular": "~1.5.1",
    "angular-slick": "~0.2.1",
    "ngInfiniteScroll": "~1.2.1"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "appPath": "app",
  "moduleName": "app"
}

非常感谢您的帮助！

【问题讨论】：

标签： jquery angularjs gruntjs bower grunt-wiredep

【解决方案1】：

删除/重新排序 jquery.js 的替代方法：

如果您的index.html 正在使用<ui-view />，请尝试将其更改为：<ui-view></ui-view>，因为 HTML5 如何处理标签，如SO post about tag syntax 中所述

其次，检查您的routes，如SO post about referencing the view incorrectly 中所述：

示例： templateUrl: 'myView/myPage.html'检查拼写和大小写

【讨论】：

谢谢，Shehryar！问题是<ui-view/> thing。我仍然想知道为什么在依赖导入切换时会发生这种情况。