CODEWITHSUNDEEP
javascriptjqueryangularjs
Praveen Menon
Praveen Menon

Reputation: 1

WARNING: Tried to load angular more than once during page load

I am getting this warning in one of my projects. This is causing issues while calling my backend api's as it is calling the api's twice. I have tried the solutions which was posted before regarding this same query on the forum but I am unable to get through this. It would be great if someone could help me out on this. Below are the app.js and index.html file. 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Qwinix Aptitude Test</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  <!-- build:css(.) styles/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:css(.tmp) styles/main.css -->
  <link rel="stylesheet" href="styles/styles.css">
  <link rel="stylesheet" type="text/css" href="styles/question/normalize.css" />
  <link rel="stylesheet" type="text/css" href="styles/question/demo.css" />
  <link rel="stylesheet" type="text/css" href="styles/question/component.css" />
  <!-- <link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css" /> -->
  <!-- <link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.css"> -->
  <link rel="stylesheet" type="text/css" href="styles/scss/style.scss">
  <!-- <link rel="stylesheet" type="text/css" href="components/angular-ui/build/angular-ui.css"> -->

  <!-- endbuild -->
</head>

<body data-ng-view="" ng-app="onlineTestAngularApp">
  <!-- 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/bootstrap/dist/js/bootstrap.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/angular-aria/angular-aria.js"></script>
  <script src="bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="bower_components/angular-messages/angular-messages.js"></script>
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="bower_components/angular-touch/angular-touch.js"></script>
  <script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
  <script src="bower_components/moment/moment.js"></script>
  <script src="bower_components/humanize-duration/humanize-duration.js"></script>
  <script src="bower_components/angular-timer/dist/angular-timer.js"></script>
  <script src="bower_components/semantic/dist/semantic.js"></script>
  <script src="bower_components/angular-fontawesome/dist/angular-fontawesome.js"></script>
  <script src="bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:js({.tmp,app}) scripts/scripts.js -->
  <script src="scripts/app.js"></script>
  <script src="scripts/config.js"></script>
  <script src="scripts/controllers/main.js"></script>
  <script src="scripts/controllers/about.js"></script>
  <script src="scripts/controllers/registration.js"></script>
  <script src="scripts/services/registration.js"></script>
  <script src="scripts/controllers/question.js"></script>
  <script src="scripts/controllers/feedback.js"></script>
  <script src="scripts/services/feedback.js"></script>
  <script src="scripts/services/question.js"></script>
  <script src="scripts/controllers/index.js"></script>
  <script src="scripts/controllers/instruction.js"></script>
  <script src="scripts/services/admin.js"></script>
  <script src="scripts/controllers/admin.js"></script>
  <script src="scripts/my_jquery.ui.js"></script>
  <script src="scripts/lib/angular-timer.js"></script>
  <!-- endbuild -->
</body>
</html>


'use strict';

/**
 * @ngdoc overview
 * @name onlineTestAngularApp
 * @description
 * # onlineTestAngularApp
 *
 * Main module of the application.
 */
angular
  .module('onlineTestAngularApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'LocalStorageModule',
    'config',
    'timer'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/registration.html',
        controller: 'registrationCtrl',
        controllerAs: 'registration'
      })
      .when('/instruction', {
        templateUrl: 'views/instruction.html',
        controller: 'instructionCtrl',
        controllerAs: 'instruction'
      })
      .when('/question', {
        templateUrl: 'views/question.html',
        controller: 'questionCtrl',
        controllerAs: 'question'
      })
      .when('/feedback', {
        templateUrl: 'views/feedback.html',
        controller: 'feedbackCtrl',
        controllerAs: 'feedback'
      })
      .when('/admin', {
        templateUrl: 'views/admin.html',
        controller: 'adminCtrl',
        controllerAs: 'admin'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Upvotes: 0

Views: 2763

Answers (4)

Wayne Bloss
Wayne Bloss

Reputation: 5550

I got this error when my templateUrl was set to a blank string and no other template was defined on a nested state as shown below.

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('main', {
      abstract: true,
      url: '',
      templateUrl: '/app/main/wrapper.html'
    })
    .state('main.welcome', {
      controller: '',
      templateUrl: '', // Causes WARNING: Tried to load angular more than once.
      url: '/'
    });
}]);

After I changed the 'main.welcome' templateUrl to a template path I no longer received the warming.

.state('main.welcome', {
  controller: '',
  templateUrl: '/app/main/welcome.html',
  url: '/'
});

Upvotes: 1

Shel
Shel

Reputation: 64

I have seen the "WARNING: Tried to load angular more than once" message when jQuery is included in the script references before Angular. If you re-order the script includes, the issue should resolve.

Example showing the problem reproduced. You can see the resolution by commenting the top jQuery reference and uncommenting the bottom one:

  'use strict';

  /**
   * @ngdoc overview
   * @name onlineTestAngularApp
   * @description
   * # onlineTestAngularApp
   *
   * Main module of the application.
   */
  angular.module('onlineTestAngularApp', [
      'ngRoute'
    ])
    .config(function($routeProvider) {
      $routeProvider
        .when('/', {
          template: '<h3>Test Angular App</h3><a ng-href="#/instruction">{{home.linkText}}</a>',
          controller: 'homeCtrl',
          controllerAs: 'home'
        })
        .when('/instruction', {
          template: '<h3>Instruction Route</h3><a ng-href="#/">{{ins.linkText}}</a>',
          controller: 'instructionCtrl',
          controllerAs: 'ins'
        })
        .otherwise({
          redirectTo: '/'
        });
    });

  angular.module('onlineTestAngularApp')
    .controller('homeCtrl', homeCtrl)
    .controller('instructionCtrl', instructionCtrl);

  homeCtrl.$inject = ['$log'];

  function homeCtrl($log) {
    var vm = this;
    vm.linkText = "Link to Instruction Page";
    $log.debug(vm);
  }

  instructionCtrl.$inject = ['$log'];

  function instructionCtrl($log) {
    var vm = this;
    vm.linkText = "Home Link";
    $log.debug(vm);
  }
<!DOCTYPE html>
<html>

<head>
  
</head>
<body data-ng-view="" ng-app="onlineTestAngularApp">
  <!-- jQuery here causes "WARNING: Tried to load angular more than once"
       Comment this reference out and uncomment the one below to see the difference
     -->
  <!-- -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script src="https://code.angularjs.org/1.4.9/angular.js"></script>
  <!-- jQuery referenced AFTER Angular resolves issue with warning message
      UNCOMMENT this one  -->
  <!-- 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js></script>
    -->

  <script src="https://code.angularjs.org/1.4.9/angular-route.js"></script>

</body>

</html>

Upvotes: 0

Sa E Chowdary
Sa E Chowdary

Reputation: 2075

i dont know why this happening for you but i know when it will happen,when that angular.js file called for more than once then we get this.some times it may due to calling some other js files which will represent or re invoke the angular.js file.please check in that way am sure you will get rid of this.

Upvotes: 0

Rishi Tiwari
Rishi Tiwari

Reputation: 1051

Check whether you have initialized the module in your controller also..

In your code you are not storing the module created in any variable(in global namespace). You are chaining everything to the module itself,so there are chances while creating your controller you are creating the module first and then chaining it like below

angualr.module('app',[]).controller('ctrl',function(){});

This will initialize the app two times.

To avoid it you can either store the module created in the app.js in a variable and then use that variable to create your controllers.

OR

If you choose to create them using chaining then just omit [] while creating the controller from the module like below

angualr.module('app').controller('ctrl',function(){});

If you create a module without using [] angular first searches for a module having similar name , if it finds one it uses that module only otherwise creates one.

Upvotes: 0

Related Questions