Lessons Learned: Upgrading an Enterprise Angular App

July 23, 2015
Reading Time: 2 minutes

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

http://stackoverflow.com/questions/13743058/how-to-access-the-angular-scope-variable-in-browsers-console

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.

Leave a Reply

Your email address will not be published. Required fields are marked *