Extremely sluggish change identification in combination Angular application

Question

Extremely sluggish change identification in combination Angular application

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());

in the AngularJS component's $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()

without success.

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());

post emitting a change event with an 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?

javascript angularjs angular typescript

Answer 1

Answer №1

After exploring various options, we ultimately concluded that the most effective solution was to pass the AngularJS $scope as an input parameter to the Angular component and ensure event emissions were wrapped in $scope.$apply(), like so:

$scope.$apply(() => valueChange.emit(value));

According to insights from the Angular upgrade guide, this approach appeared to be the sole method for ensuring functionality when utilizing downgradeModule().

Answer 2

After exploring various options, we ultimately concluded that the most effective solution was to pass the AngularJS $scope as an input parameter to the Angular component and ensure event emissions were wrapped in $scope.$apply(), like so:

$scope.$apply(() => valueChange.emit(value));

According to insights from the Angular upgrade guide, this approach appeared to be the sole method for ensuring functionality when utilizing downgradeModule().

Answer 3

Answer №2

One challenge that arises in AngularJS is its cyclic nature of execution, referred to as ($digset). This allows AngularJS to compare changes between the model and the view.

During each $digest cycle, the watchers are activated. This is when Angular evaluates the expressions linked to the view and updates them accordingly for the user to see.

Sometimes, there may be operations on the client side that need to occur outside of the "Angular world," meaning Angular is unaware of these changes and does not update the user interface. To address this issue, various methods can be employed, such as:

$apply()
$timeout()
$digest()
$evalAsync()

The introduction of $evalAsync() in AngularJS 1.2.X has proven to be an effective solution in my experience.

Prior to the availability of $evalAsync(), the Angular team recommended using $timeout() to handle issues with cycles and external updates.

As more users encountered this challenge over time, the Angular team introduced $evalAsync() to address it by evaluating expressions within the current or next cycle.

For further information, refer to: source

Answer 4

One challenge that arises in AngularJS is its cyclic nature of execution, referred to as ($digset). This allows AngularJS to compare changes between the model and the view.

During each $digest cycle, the watchers are activated. This is when Angular evaluates the expressions linked to the view and updates them accordingly for the user to see.

Sometimes, there may be operations on the client side that need to occur outside of the "Angular world," meaning Angular is unaware of these changes and does not update the user interface. To address this issue, various methods can be employed, such as:

$apply()
$timeout()
$digest()
$evalAsync()

The introduction of $evalAsync() in AngularJS 1.2.X has proven to be an effective solution in my experience.

Prior to the availability of $evalAsync(), the Angular team recommended using $timeout() to handle issues with cycles and external updates.

As more users encountered this challenge over time, the Angular team introduced $evalAsync() to address it by evaluating expressions within the current or next cycle.

For further information, refer to: source

Extremely sluggish change identification in combination Angular application

Answer №1

Answer №2

Similar questions

Storing the selected value from dynamically generated options in Angular using ngFor

Issue detected: [ng:areq] The parameter 'Ctrl' is not recognized as a function

Is it possible to combine TypeScript modules into a single JavaScript file?

Exploring the distinction in dependency injection syntax within AngularJS

Using AngularJS to create a select dropdown menu with nested objects as the options

Establishing the module exports for the NextJS configuration file

Cease the repetitive running of the function in a gentle manner

What is the best way to make multiple network requests with varying parameters using rxjs in an Angular application?

Exploring Techniques for Adjusting Website to User's Screen Resolution

Tips on adjusting a position that shifts with changes in window size

Customize your Google Translate experience by choosing your own option values

In Production mode, Angular automatically reloads the page every time my data request service is executed to fetch data from the API

Saving numerous files with Promises

The state value is not preserved after redirecting to another page

What is the best way to include an API key in the response to an Angular client application?

Ensure data is only fetched in Ngrx if the store is empty

Reset the jQuery star-rating plugin

Exploring the Secrets of JSON Parsing in Angular

The command "Npm Start Causes sleep is not accepted" just popped up

Exploring Angular.js: How to propagate model changes from a child controller within an ng-repeat loop?