We are encountering consistent issues with slow change detection in our hybrid AngularJS / Angular 8 app, especially when dealing with components from different versions of the framework. The problem seems to arise when using older AngularJS components within newer Angular ones. For example, we have noticed delays ranging from ~2 to ~10 seconds in propagating changes made in an AngularJS component to an Angular 8 form, impacting form validations. While the UI remains responsive, there appears to be a delay in communication between the framework versions. Although we have yet to pinpoint the exact cause, we have discovered a workaround: including
$timeout(() => $scope.apply());$onChanges listener triggers change detection in Angular and alleviates the delay.
We are now facing a similar issue with an Angular component nested within an AngularJS component. The delay occurs after selecting a date in an Angular component wrapping an NG Bootstrap datepicker, taking up to 10 seconds for the parent AngularJS form to register the changes. According to Angular's upgrade guide, utilizing NgZone.run() can manually trigger change detection when using downgradeModule(). However, implementation details on how to use run() effectively remain unclear. We also attempted to use
ChangeDetectorRef.detectChanges()In an attempt to resolve this issue, I passed the AngularJS parent component's $scope down to the Angular component and utilized
setTimeout(() => $scope.$apply());EventEmitter. This method did eliminate the delay, although it is not ideal for long-term use.
Do you have any recommendations on how to reduce change detection delays between AngularJS and Angular 8 components, either through manual triggering within an Angular component or alternative approaches?