Are there any alternatives to ngUpgrade for running angular and angularjs side-by-side, or a way to opt out of ngUpgrade's $digest triggers?

Question

I have a rather large angular.js 1.6 app that I would like to migrate to Angular, but using ngUpgrade causes way too many $digests to be triggered (i.e. every time Zone.onMicrotaskEmpty is fired). Unfortunately the app I am migrating is already not too great performance-wise, so every extra $digest is a pretty big deal. While I can mitigate this somewhat with ngZone.runOutsideAngular(), what I would really like is to totally disable the automatic triggering of $digests from the upgrade module, and just manually trigger them when necessary; since the app is composed of coarse-grained components which I will migrate one-by-one, there will be little need for a change in Angular to trigger a $digest in angular.js.

Here are a few of the possible solutions I am considering; are any of them more "standard" (or less risky / error prone) than the others?

• Use a locally modified version of ngUpgrade with the call to rootScope.$digest() removed
• Host upgraded Angular components in an iframe and use postMessage() for interaction with the app
• Host upgraded Angular components in a web component (have not yet investigated how communication would work in that case)
• Bootstrap both an angular.js and an Angular app from the same document, letting them both process their own directives/components on the page

Update (8/23): For now I am giving option 1 a try (locally modifying the upgrade js file); while I usually like to avoid doing such things, it seems like the safest bet so far.

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 have tried both ways. To avoid all issues with $digest and performance I recommend using DowngradeModule