jQuery dependency above Angular one: WARNING: Tried to load angular more than once

Question

I am working on a Yeoman Angular-generated folder. I installed through Bower a module that requires jQuery. Grunt's wiredep places the jQuery dependency above the AngularJS in the index.html, as follows:

<!-- 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 -->

This seems reasonable, as jQuery doesn't depend on Angular.

The thing is that when I try to load my app in the browser, I get the following message in JS console:

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

If I manually swap the jQuery dependency with the angular one at index.html, everything works like a charm, but when I grunt build my app, default order is set, so I can't get the working configuration in the dist folder.

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"
}

Really appreciate your help here!

Community · Accepted Answer · 2017-05-23 10:26:34Z

3

alternatives to removing/reordering jquery.js :

if your index.html is using <ui-view /> then try changing it to this: <ui-view></ui-view> because of how HTML5 handles tags as explained in this SO post about tag syntax

secondly, do a check of your routes, as explained in this SO post about referencing the view incorrectly :

example: templateUrl: 'myView/myPage.html' check the spelling and capitalization

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered May 21, 2015 at 20:57

Shehryar Abbasi

3782 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alvaro Over a year ago

Thanks, Shehryar! The issue was the <ui-view/> thing. I still wonder why this happens at the dependency import switching.

Collectives™ on Stack Overflow

jQuery dependency above Angular one: WARNING: Tried to load angular more than once

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related