Tried to Load Angular More Than Once

Question

I have a yeoman scaffolded app  the angular fullstack generator     grunt serve works fine  but grunt build produces a distribution that locks up memory  most probably because of circular references in angular   I upgraded angular to 1 2 15   The error I get is   WARNING  Tried to Load Angular More Than Once  Prior to upgrading  the error was   Error  10  digest   iterations reached  Aborting   It s pretty difficult to debug as it only happens after build   minification   All my modules are in angular s array format  so the minification DI shouldn t be a problem but it is   There s no single script that causes this   The only way it goes away is if I don t initialize with my app js file   My app js file is below   Any thing come to mind    use strict    angular module  myApp        ngCookies      ngResource      ngSanitize      ngRoute      ngTagsInput      ui bootstrap      google-maps      firebase       angular module  myApp   config    routeProvider   function   routeProvider         routeProvider        when                templateUrl   views listing html           controller   ListingCtrl                  otherwise           redirectTo                      constant  FIREBASE URL    something

User · Answer

Capitalization matters as well  Inside my directive  I tried specifying   templateUrl   Views mytemplate    and got the  more than once  warning  The warning disappeared when I changed it to   templateUrl   views mytemplate    Correct me  but I think this happened because page that I placed the directive on was under  views  and not  Views  in the route config function

User · Answer

Had this problem today and figured I would post how I fixed it  In my case I had an index html page with    lt body ng-app  myApp  ng-controller  mainController      lt div ng-view gt  lt  div gt   lt  body gt    and in my app js file I had the following code    routeProvider when            controller    mainController       templateUrl    index html       title    Home       when   other         controller    otherController       templateUrl    views other html       title    other       otherwise       redirectTo               As a result  when I went to the page  base url   it loaded index html  and inside the ng-view it loaded index html again  and inside that view it loaded index html again   and so on - creating an infinite recursive load of index html  each time loading angular libraries    To resolve all I had to do was remove index html from the routProvider - as follows    routeProvider when   other         controller    otherController       templateUrl    views other html       title    other       otherwise       redirectTo

User · Answer

I was also facing such an issue where I was continously getting an infinite loop and the page was reloading itself infinitely  After a bit of debugging I found out that the error was being caused because  angular was not able to load template given with a particular id because the template was not present in that file   Be careful with the url s which you give in angular apps  If its not correct  angular can just keep on looking for it eventually  leading to infinite loop   Hope this helps

User · Answer

I have the same problem  because I have angular two times in index html    lt script src  https   handsontable github io ngHandsontable node modules angular angular js  gt  lt  script gt   lt script src  https   ajax googleapis com ajax libs angularjs 1 5 7 angular min js  gt  lt  script gt    Note that the warning arises only when html5 mode is true  when my html5 mode was false  I did not see this warning   So removing the first angular js solves the problem

User · Answer

I was having the exact same error  After some hours  I noticed that there was an extra comma in my  JSON file  on the very last key-value pair     doesn t work        key   value        key   value        key   value       Then I just took it off  the last      and that solved the problem     works        key   value        key   value        key   value

User · Answer

I had a similar issue  and for me the issue was due to some missing semicolons in the controller  The minification of the app was probably causing the code to execute incorrectly  most likely the resulting code was causing state mutations  which causes the view to render  and then the controller executes the code again  and so on recursively

User · Answer

I had that problem on code pen  and it turn out it s just because I was loading JQuery before Angular  Don t know if that can apply for other cases

User · Answer

This happened to me too with  NET and MVC 5 and after a while I realized that within the label on Index cshtml file    lt div data-ng-view    gt  lt  div gt    again included as section scripts happens to you  To solve the problem on the server side what I do is return the partial view  Something like   public class HomeController   Controller       public ActionResult Index                 return View               public ActionResult Login                 return PartialView               public ActionResult About                 return PartialView

User · Answer

In my case I have index html which embeds 2 views i e view1 html and view2 html  I developed these 2 views independent of index html and then tried to embed using route  So I had all the script files defined in the 2 view html files which was causing this warning  The warning disappeared after removing the inclusion of angularJS script files from views      In short  the script files angularJS  jQuery and angular-route js   should be included only in index html and not in view html files

User · Answer

In my case I was getting this error while using jquery as well as angular js on the page    lt script src  http   code jquery com jquery-2 1 3 min js  type  text javascript  gt  lt  script gt   lt script src  js angular js  type  text javascript  gt  lt  script gt   lt script src  js angular-route js  type  text javascript  gt  lt  script gt    I removed      lt script src  http   code jquery com jquery-2 1 3 min js  type  text javascript  gt  lt  script gt    And the warning disappeared

User · Answer

The problem could occur when  templateCacheProvider is trying to resolve a template in the templateCache or through your project directory that does not exist  Example   templateUrl   views wrongPathToTemplate    Should be   templateUrl   views home html

User · Answer

You must change angular route      It is a problem because     base url request  If you change          home  or   hede  angular will good work

User · Answer

I had this problem when missing a closing tag in the html      So instead of    lt table gt  lt  table gt       my HTML was    lt table gt     lt table gt    Tried to load jQuery after angular as mentioned above  This prevented the error message  but didn t really fix the problem  And jQuery   find  didn t really work afterwards    Solution was to fix the missing closing tag

User · Answer

This doesn t have anything to do with app js at all   Instead  this warning is logged when you include the Angular JS library more than once   I ve managed to reproduce the error in this JSBin   Note the two script tags  two different versions     lt script src  https   ajax googleapis com ajax libs angularjs 1 2 14 angular min js  gt  lt  script gt   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 15 angular min js  gt  lt  script gt    Relevant Angular code at GitHub

User · Answer

Seems like nobody has mentioned this anywhere so here is what triggered it for me  I had the ng-view directive on my body  Changing it like so   lt body layout  column  gt   lt div ng-view gt  lt  div gt       lt  body gt    stopped the error

User · Answer

My problem was the following line  HAML     a  href   gt       ng-click    gt   showConfirmDeleteModal     Delete   Notice that I have a angular ng-click and I have an href tag which will jump to   which is the same page   I just had to remove the href tag and I was good to go

User · Answer

For anyone that has this issue in the future  for me it was caused by an arrow function instead of a function literal in a run block      bad module  a   run      gt           good module  a   run function

User · Answer

I had this same problem   Tried to Load Angular More Than Once   because I had included twice angularJs file  without perceive  in my index html    lt script src  angular js  gt   lt script src  angular min js  gt

User · Answer

Another case is with Webpack which concating angular into the bundle js  beside the angular that is loaded from index html  lt script gt  tag   this was because we used explicit importing of angular in many files   define   angular         function angular          so  webpack decided to bundle it too  cleaning all of those into   define        function         was fixing Tried to Load Angular More Than Once for once and all

User · Answer

This could be a number of issues  essentially it s a problem of routeProvider not finding a file and recursively loading the default   For me  it turned out that it wasn t minification but concatenation of the js that caused the problems     angular module  myApp   config    routeProvider   function   routeProvider         routeProvider        when                templateUrl   views listing html           controller   ListingCtrl                  otherwise           redirectTo                      constant  FIREBASE URL    something      You ll notice that if the app can t find a file  i e   otherwise   then it will redirect to the root  which in this case loads the templateUrl   But if your templateUrl is wrong  then it will cause a recursion that reloads index html loading angular  and everything else  over and over   In my case  grunt-concat caused the templateUrl to be wrong after build  but not before

User · Answer

I had the same issue  The problem was the conflict between JQuery and Angular  Angular couldn t set the full JQuery library for itself  As JQLite is enough in most cases  I included Angular first in my web page and then I loaded Jquery  The error was gone then

User · Answer

The problem for me was  I had taken backup of controller  js  file with some other changes in the same folder and bundling loaded both the controller files  original and backup js   Removing backup from the scripts folder  that was bundled solved the issue

[javascript] Tried to Load Angular More Than Once

Examples related to javascript

Examples related to angularjs

Examples related to gruntjs