All geek questions in one place

SCRIPT5022: 10 $ digest () iterations. Aborting! and redirecting to index.html

Problem:

I am trying to download an Angular JS application in a bootable modal panel and it displays strange behavior in Internet Explorer (we tested it on IE9 and 8).

we found that the following errors were received:

** 'JSON' undefined ** object Concerned

SCRIPT5022: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: function $locationWatch() { var oldUrl = $browser.url(); var currentReplace = $location.$$replace; if (!changeCounter || oldUrl != $location.absUrl()) { changeCounter++; $rootScope.$evalAsync(function() { if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl). defaultPrevented) { $location.$$parse(oldUrl); } else { $browser.url($location.absUrl(), currentReplace); afterLocationChange(oldUrl); } }); } $location.$$replace = false; return changeCounter; }; newVal: 7; oldVal: 6"],["fn: function $locationWatch() { var oldUrl = $browser.url(); var currentReplace = $location.$$replace; if (!changeCounter || oldUrl != $location.absUrl()) { changeCounter++; $rootScope.$evalAsync(function() { if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl). defaultPrevented) { $location.$$parse(oldUrl); } else { $browser.url($location.absUrl(), currentReplace); afterLocationChange(oldUrl); } }); } $location.$$replace = false; return changeCounter; }; newVal: 8; oldVal: 7"],["fn: function $locationWatch() { var oldUrl = $browser.url(); var currentReplace = $location.$$replace; if (!changeCounter || oldUrl != $location.absUrl()) { changeCounter++; $rootScope.$evalAsync(function() { if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl). defaultPrevented) { $location.$$parse(oldUrl); } else { $browser.url($location.absUrl(), currentReplace); afterLocationChange(oldUrl); } }); } $location.$$replace = false; return changeCounter; }; newVal: 9; oldVal: 8"],["fn: function $locationWatch() { var oldUrl = $browser.url(); var currentReplace = $location.$$replace; if (!changeCounter || oldUrl != $location.absUrl()) { changeCounter++; $rootScope.$evalAsync(function() { if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl). defaultPrevented) { $location.$$parse(oldUrl); } else { $browser.url($location.absUrl(), currentReplace); afterLocationChange(oldUrl); } }); } $location.$$replace = false; return changeCounter; }; newVal: 10; oldVal: 9"],["fn: function $locationWatch() { var oldUrl = $browser.url(); var currentReplace = $location.$$replace; if (!changeCounter || oldUrl != $location.absUrl()) { changeCounter++; $rootScope.$evalAsync(function() { if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl). defaultPrevented) { $location.$$parse(oldUrl); } else { $browser.url($location.absUrl(), currentReplace); afterLocationChange(oldUrl); } }); } $location.$$replace = false; return changeCounter; }; newVal: 11; oldVal: 10"]]

and many other mistakes

So, we found that there are 3 problems on IE: 1) JSON is not available 2) Problem with the Bootstraping application 3) Viewing the rendering of the problem

after going through Angular JS documentation and a lot of threads from StackOverflow, for example:

We found that for all threads there are several common ones (also mentioned in the AngulaJS IE manual): * Enable JSON2 / JSON3 pollyfills for IE * use ie-shiv and pre-declare custom tags (we use a custom typeahead directive with the restriction: "E" , replace: true) * use other special IE instructions

So, I made the following chagnes:

 var markup = '<div id="ng-app" class="ng-app:myapp" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>'; jQuery('#works-modal').html(markup); angular.bootstrap(jQuery('#ng-app'), ['myapp']); jQuery('#works-modal').modal('show');

After doing the above changes, I still got:

 Error: 10 $digest() iterations reached. Aborting!

https://github.com/angular/angular.js/issues/1417

When trying to visualize viewing, the application was redirected to the home page. so I tried to make the changes suggested in:

https://github.com/RobbinHabermehl/angular.js/commit/c801f91a25b9be6f5b1163c012e63c84cc6a1359

Now I no longer get the error when I click the link to display the Modal dialog, it displays a pop-up window per second and then redirects to the main page.

If I install:

 $locationProvider.html5Mode(false) .hashPrefix('!');

It works great. Does anyone encounter a similar problem? Any help is appreciated.

Update I also reported this problem in the Angular JS Github error list, they informed me that they fixed this problem in version 1.2:

https://github.com/angular/angular.js/issues/3397

I will check and update this thread if this solves my problem.

Update

I updated my version of Angular, and it seems to allow this “ 10 $ digest () iteration achieved. Aborting! ”, However it looks like it causes the URL to change, it redirects to the home page.

Let me explain my scenario here so that others can suggest to me if this is exactly related to this or not:

I have a page: http://example.com/users/myCollection.html On this page, I load the AngularJS application inside the Bootstrap Modal dialog box when a user clicks on any link on the page. Angular application route loaded in Modal: / mywork / find

After updating the Angular version, now the modal seems to load the application for a second, then redirect, and it goes to the home page.

FYI , I also use jQuery on the page that is used to run the Angular application, is there any chance of a conflict because of this?

Thanks Ravish

+6
source share
1 answer

I have already discussed my problems above, and the steps that I have taken to fix this problem. Let me calm down again, and then I will lay out the problem using the "Hierarchy 10 $ digest (). Aborting! ":

Step 1) Problem with boot application in IE

The problem with loading the application in IE. We load our Angular application inside the Bootstrap modal dialog and manually download the Angular application. Since we got the idea of ​​the error, we suspected that it was released either: we missed something that our favorite IE didn’t like, or he just didn’t like my custom directive, or the Hogan Engine that we used with our usual directive. I resolved them by reading the specific Angular JS documentation and one Stackoverflow thread.

I highly recommend following everyone working or working on Angular JS that you intend to use in IE, read the following:

Step 2)

After step 1, we were able to get an application working with html5mode (false), but html5mode (true) was still a problem for us. After some debugging and adding a console.log pair, we realized that even with html5mode (false) the application was downloaded twice. Twice ?, but we were manually a boot application. Below is my template to bootstrap Angular app:

 var markup = '<div id="ng-app" class="ng-app:myapp" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>'; jQuery('#works-modal').html(markup); angular.bootstrap(jQuery('#ng-app'), ['myapp']); jQuery('#works-modal').modal('show');

We modified something like:

 var markup = '<div id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org"><div ng-controller="MyAppAppCtrl"><div ng-view></div></div></div>'; jQuery('#works-modal').html(markup); angular.bootstrap(jQuery('#ng-app'), ['myapp']); jQuery('#works-modal').modal('show');

added onclick = "return false;" href = "#" in the link used to launch the application.

Note. If your application has hyperlinks, make sure that you handle them correctly and they do what you want from them, because "href" can cause a change in location that your application may not like.

Step 3) Updated Angular JS Version

Several Angular JS Github pages have listed several possible fixes:

one such fix was mentioned in the following Gist: https://github.com/RobbinHabermehl/angular.js/commit/c801f91a25b9be6f5b1163c012e63c84cc6a1359

However, I was embarrassed to think that fixing the main libraries, updating the main libraries has its own drawback, i.e. you can redistribute part of the code used by your application from the library, are outdated, but if there is a critical bug fix (for example, fixing the problem we encountered) and improvements that always go. so we will move on to the latest stable build of Angular JS.

Now we no longer get the error and can download our application in all browsers (yes, even on OMG IE7;)).

It's OK, really? Well, after updating the Angular version, now the modal seems to load the application for a second, then it redirects and it goes to the home page.

However, the Angular JS $ Location Guide (location service configuration and Hashbang and HTML5 modes) explains this here: http://code.angularjs.org/1.2.14/docs/guide/dev_guide.services.$location

HashBang (or HTML5 fallback mode) requires server-side configuration, which is a kind of server-side hack. And it’s really up to you if you really want something like that or not.

So now everything is fine :)

Hope this will be useful for anyone struggling with this or something similar.

Again Angular JS rocks;)

+9
source

Source: https://habr.com/ru/post/955593/

More articles:


All Articles