AngularJS: UI-router WARNING: Tried to load angular more than once

Question

I am trying to use angular ui-router in my web application, but I have a problem. Here is the application directory:

  test-app
   | _ bower-component
   | _ app
      | _ views
      | _ index.html
      | _ scripts
         | _ app.js 

and app.js :

  angular
   .module ('testApp', [
     'ngAnimate',
     'ngAria',
     'ngCookies',
     'ngMessages',
     'ngResource',
     'ui.router',
     'ngSanitize',
     'ngTouch'
   ])
   .config (['$ stateProvider', '$ urlRouterProvider', function ($ stateProvider, $ urlRouterProvider) {
     $ urlRouterProvider.otherwise ('/');  
     $ stateProvider
       .state ('home', {
         url: '/',
         templateUrl: 'index.html',
         controller: 'MainCtrl'
       })
    .
    .
    .

But when I run the application, I get this error on the console:

 WARNING: Tried to load angular more than once 

Answer 1

Your web server loads the index.html file, but then you upload it again in the view using

 templateUrl: 'index.html' 

So, I think you intended this to be a different template. What you have here causes the index HTML index file to load internally, including the angular script tags, which causes this error.

Answer 2

Using reqire ('./path/angular.min.js') will solve any problem related to loading more than once.