Injecting $location service in config and calling path triggers 10 $digest() iterations reached

[Mieczysław Daniel Dyba]

I'm building an app that is composed of several mortgage calculators. Each calculator is a separate route in the app. I'm bootstrapping the angular app so that I can render any number of calculators simply by adding a data attribute to a div tag that points to the correct route.

Here is a Plunker to show you the gist of how I'm building the app: http://plnkr.co/edit/EAV7j8

I'm having trouble with injecting the $location service into the run function. These are the errors I'm getting:

1. Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 8; oldVal: 7","savvy; newVal: \"Savvy?\"; oldVal: undefined"],["fn: $locationWatch; newVal: 9; oldVal: 8","savvy; newVal: \"Savvy?\"; oldVal: undefined"],["fn: $locationWatch; newVal: 10; oldVal: 9","savvy; newVal: \"Savvy?\"; oldVal: undefined"],["fn: $locationWatch; newVal: 11; oldVal: 10","savvy; newVal: \"Savvy?\"; oldVal: undefined"],["fn: $locationWatch; newVal: 12; oldVal: 11","savvy; newVal: \"Savvy?\"; oldVal: undefined"]] http://errors.angularjs.org/1.2.16/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…%3B%20newVal%3A%20%5C%22Savvy%3F%5C%22%3B%20oldVal%3A%20undefined%22%5D%5D at https://code.angularjs.org/1.2.16/angular.js:78:12 at Scope.$digest (https://code.angularjs.org/1.2.16/angular.js:12290:19) at Scope.$apply (https://code.angularjs.org/1.2.16/angular.js:12516:24) at done (https://code.angularjs.org/1.2.16/angular.js:8204:45) at completeRequest (https://code.angularjs.org/1.2.16/angular.js:8412:7) at XMLHttpRequest.xhr.onreadystatechange (https://code.angularjs.org/1.2.16/angular.js:8351:11) angular.js:9778

1. Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 8; oldVal: 7","savvy; newVal: \"Savvy?\"; oldVal: undefined"],["fn: $locationWatch; newVal: 9; ol...<omitted>...5D angular.js:78

1. Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 19; oldVal: 18","savvy; newVal: \"Savvy?\"; oldVal: undefined"],["fn: $locationWatch; newVal: 20;...<omitted>...5D angular.js:78

Should I not be calling path on $location inside the run function? It looks like calling path triggers several calls to $digest. I'm reading through the source code to understand what I'm doing wrong but I figured someone here might beat me to it and give me a good explanation.

Thanks in advance!

[Jeff Hubbard]

Let me guess: you've got at least 2 apps that you're bootstrapping, and at least 2 of them make use of $location? Because that's a big no-no. I spent a few days tracking that down recently. If you really, truly do need to write to $location in two apps... then I have no idea. But if all you need is read access, then use $window.location instead.

[Mieczysław Daniel Dyba]

Thanks Jeff! Your explanation makes sense. Do you have any idea how to accomplish what I'm doing without writing to $location?

I was thinking of a different approach earlier where I use ng-controller="blah" and ng-include="'views/blah.html'". This works but I need to package this app up so that I can throw it into any site I want and have the calculator render correctly. I understand that ng-include has strict policies about where it gets the html template; if I host the templates on a server, I believe I'll have to whitelist that server in the app. I'll have to read more about that approach. 

The main goal in using $location was to have a simple way to render a calculator app for an end-user (imagine, someone who knows very little about code).

[Jeff Hubbard]

Without seeing some code, I couldn't really tell you for sure. However, you can package your html template with the rest of the code by simply sticking the file into $templateCache. See part 2 of the accepted answer here: http://stackoverflow.com/questions/12346690/is-there-a-way-to-make-angularjs-load-partials-in-the-beginning-and-not-at-when

[Mieczysław Daniel Dyba]

Nice! That tidbit brings me a step closer to accomplishing what I have in mind. Thanks Jeff!

[Lasse Christiansen]

Hi Again Jeff,

I guess I'm totally out of luck now - as we discussed on github yesterday ( https://github.com/angular/angular.js/issues/1417 ) I switched from using $location to window.location in one of my apps, but since the window.location-powered app needs to modify the url I still get the error if it has been modified to something that causes the $routeProvider to execute its "otherwise" case. So yeah, I guess I will spend my day on figuring out what to do next. I don't know if a solution would be to switch to ui-router instead - that might be an option.

/Lasse

[Karina Manalo]

Hi! I work at an edtech company called Pedago. We have a software team that is split across two regions. We also have non-software folks located in several cities from the East Coast to West Coast. All of us need to work together each week. Our director of engineering who has worked on geographically split teams for the last 10 years recently wrote a post on our blog about strategies to make remote teamwork effective: Five key principles that make geographically split software teams work

Here's an outline of the 5 points. Hope this helps! 

1. Shared chat rooms 
2. Shared hours
3. Daily video check-ins
4. Aggressively help others and ask for help
5. Follow the rules