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.

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

Answer 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.