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

Question

I try to use angular ui-router in my web app but I have problem. Here is the app directory:

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

and in 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 app, I get this error on console:

WARNING: Tried to load angular more than once

Peter Ashwell Peter Ashwell · Accepted Answer · 2015-03-16T07:52:38

Your webserver loads the index.html file, but then you load it again in the view with

templateUrl: 'index.html'

So I think you intended that to be a different template. What you have here causes the index HTML file to be loaded inside itself, including the angular script tags, causing that error.

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

2 Answers