WARNING: Tried to load angular more than once. when I include JQuery

Question

I am building an yeoman app with an angular-generator.

The js libraries included in my index.html file are:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/modernizr/modernizr.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="bower_components/d3/d3.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>

The problem only occurs if jquery is included before angular and it does not happen if it is after it.

The problem as the title states is that I get "WARNING: Tried to load angular more than once" in the console and the app cannot initialize.

Does anyone have any clues why this can happen?

I have a single ng-app, I am including angular just once... and everything. It does not look like it is something related to the configuration because changing the position of the script fixes it.

Do you guys have any clue?

Does anyone know if I am able to configure to include order of the scripts? As I am using angular-generator I have set this up with usemin to include the bower scripts. I wonder if there is any way to be able to specify in which order to include the scripts.

This is the bower.json file for my project:

{
  "name": "<name>",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.15",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "angular-ui-router": "~0.2.10",
    "modernizr": "~2.8.1",
    "d3": "~3.4.6",
    "angular-ui-select2": "~0.0.5"
  },
  "devDependencies": {
    "angular-mocks": "1.2.15",
    "angular-scenario": "1.2.15"
  }
}

I have tried to search in google with no luck. Thanks in advance!

Update 1:

I just found out that if I include the scripts this way, angular won't be included twice and it is always loaded first.

  <!-- build:js scripts/vendor.js -->
  <script src="bower_components/angular/angular.js"></script>
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/modernizr/modernizr.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="bower_components/d3/d3.js"></script>
  <script src="bower_components/select2/select2.js"></script>
  <script src="bower_components/angular-ui-select2/src/select2.js"></script>
  <!-- endbower -->

Not the best solution but at least for now... Anyways, I would like to have everything inside bower:js tags.

Solution 1

After long hours of testing... it ended up being that on my index.html file I had a

<ui-view />

to be used by angular ui router and replacing it to this, did the trick.

<ui-view></ui-view>

Solution 2

For me, this happened when I referenced my view incorrectly in my routes.

I had:

.when('/route', {
      templateUrl: 'views/myPage.html',
      controller : 'myCtrl'
})

but my view was named views/mypage.html

The error message is not what I would expect. I would have expected a missing view error.

Solution 3

This happened to me too with .NET and MVC 5 and after a while I realized that within the label: ngview

again included as section scripts happens to you. To solve the problem on the server side what I do is return the partial view. Something like:

public ActionResult Index()
{
    return View();
}

public ActionResult Login()
{
    return PartialView();
}

public ActionResult About()
{
    return PartialView();
}

Solution 4

I was getting the same warning and it was because of the order of the files included, as well as the version used.

To resolve the above warning , I re-included the files in the following order:

jquery.js
jqueryui.js
angular.js

Note: You have to add jquery script tag before angularjs so that angularjs can replace jqLite by jQuery.

Moreover, my code was working with AngularJS v1.2.0, but not with a higher angular version. So check for your jquery and angularjs version compatibility as well.

View more solutions

Comments

[Colton McCormack]

This just fixed an issue that had been bugging me for hours. Thank you! I was seeing extraneous calls from jQuery trying to reload the files that had already been loaded. It seems to be caused by a combination of using a self-closing ui-view tag, angular-ui-router, and jquery.

[Agustin Lopez]

those are not identical... check this stackoverflow.com/a/3558200/1049900 "In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag"."

[Hawk]

Any explanation for this?

[Admin]

this type warning occurs when you tried to load it from more than one source so just try to call it from one source..so i suggested to comment it ..i had a same problem in vs2013 project now it solved .......

[VeldMuijz]

Wow, this took me hours of debugging for such a stupid mistake. When you have an .otherwise("/") statement referencing the index page (default route if the url is not found) this happens. Thanks Jim

[Steve Kennedy]

This helped me removing the error. I am using ASP.NET views for my templateURL, instead of actual static .html files, in order to continue to use razor.

[Mudit Juneja]

The same issue was with me.

[Mudit Juneja]

But locally it was working fine when I was using node server.Thanks.

[Tuco]

In my case I was using the ui-view attribute inside the body tag. I solved the warning by removing the ui-view from the body and creating an isolated <ui-view>...</ui-view> (as suggested by op)

[tschumann]

Similar thing - no such template caused this error.