WARNING: Tried to load angular more than once during page load
Question
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: '/' }); });
4 answers
solution1
1 2017-06-30 18:19:08
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: '/'
});
solution2
0 2016-06-30 15:39:29
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.
solution3
0 2016-06-30 17:09:36
我不知道为什么会这样，但是我知道什么时候会发生，当那个angular.js文件调用了不止一次时，我们得到了this。有时可能是由于调用了其他代表或重新调用js文件的文件angular.js file.please以这种方式检查，确保您会摆脱这一点。
solution4
0 2016-07-01 18:22:12
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.