I recently completed an upgrade for an Enterprise Angular app from 1.2.24 to 1.3.15. Doing an upgrade on a large system is no small undertaking. Finding solutions to resolve upgrade incompatibilities can seem like a bit of black magic at times. This upgrade was no exclusion to just that.
The most common error I got was Error: $rootScope:infdig Infinite $digest Loop. Staring at these errors in the console all I could think about was how on earth was I going to fix them?! With a codebase that’s more than 45k lines for just the front end, I start questioning if I’m going to be able to even do this, if I’m a good enough developer, etc. The typical Imposter’s Syndrome that’s so prevalent in this line of work.
This error typically gives you 0 hints what’s causing it, and where it’s coming from, but I found some resources that helped me realize that anything that has a watcher needs to be Idempotent in AngularJS. If it’s not, it could be the source of an infinite digest loop.
So I thought rather than make a long write up of all the different pieces I solved in my project, I thought I’d supply the main resources that I had to read and understand in order to solve different errors. Let’s face it, all projects will be different, but the overall upgrade challenges I’d assume are going to be relatively similar. Here’s the list:
Scope Work
https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()
Infinite Digest
https://github.com/angular/angular.js/issues/705 (Idempotent – Important to know for usually fixing Infinite Digest Errors)
http://stackoverflow.com/questions/20567614/errors-in-angularjs-often-causes-infinite-loops
http://stackoverflow.com/questions/17466872/infinite-loop-with-angular-expression-binding
http://stackoverflow.com/questions/21322755/tracking-down-infinite-digest-errors
http://stackoverflow.com/questions/24592283/angular-infinite-digest-loop
Filters
http://stackoverflow.com/questions/25877704/what-is-stateful-filtering-in-angularjs
http://stackoverflow.com/questions/27402326/angularjs-1-3-async-filter-not-working
Grep/Ack Tricks
http://stackoverflow.com/questions/9081/grep-a-file-but-show-several-surrounding-lines
Enhanced performance is a major upgrade that you get when going from 1.2.x to 1.3.x. If you make sure your filters aren’t stateful and you start setting up all two-way data bindings that never change to use the ‘::’ one time binding syntax you can quite easily supercharge an app with performance issues. Feel free to connect with me if you have any particular difficult bug that you’re trying to fix during an upgrade.