Angularjs digest in progress error while using with hybrid app

Question

So, I have a pretty bulky hybrid app using angularjs 1.7 and angular 5.x. I am using ngUpgrade module to run both the apps, however I have run into a problem where if I use href to navigate to a different route (defined in angularjs router), I get the digest cycle already in progress and it breaks the whole app and nothing loads (I am guessing angular is running outside of zone at this point). I was able to solve this issue for other events (click, etc) by using $timeout, but I really want href to work now.

  core.js:1449 ERROR Error: [$rootScope:inprog] $digest already in progress 
    https://errors.angularjs.org/1.7.3/$rootScope/inprog?p0=%24digest
    at angular.js:138
    at h (angular.js:19720)
    at f.$digest (angular.js:19050)
    at static.js:1508
    at t.object.i [as _next] (core.js:4354)
    at t.__tryOrUnsub (Subscriber.js:242)
    at t.next (Subscriber.js:189)
    at t._next (Subscriber.js:129)
    at t.next (Subscriber.js:93)
    at t.next (Subject.js:55)

Answer 1

There are two ways to bootstrap a Hybrid App:

1. UpgradeModule - bootstraps both the AngularJS (v1) and Angular (v6) frameworks in the Angular zone

2. DowngradeModule - bootstraps AngularJS outside of the Angular zone and keeps the two change detection systems separate.

I had the same errors with $digest and tried both ways. To avoid all issues with $digest and performance you should use DowngradeModule.

Look at: https://github.com/angular/angular/issues/19299 and https://angular.io/guide/upgrade-performance