Angular2 - Error: The view has been destroyed and cannot be updated: detectChanges

Question

Angular2 - Error: The view has been destroyed and cannot be updated: detectChanges

My application keeps encountering this persistent error:

extensions::uncaught_exception_handler:8 Error in event handler for runtime.onMessage: Attempt to use a destroyed view: detectChanges
at ViewDestroyedException.BaseException [as constructor] (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/@angular/core/core.umd.js:3776:27)
at new ViewDestroyedException (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/@angular/core/core.umd.js:6957:20)
at DebugAppView.AppView.throwDestroyedError (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/@angular/core/core.umd.js:10041:76)
at DebugAppView.AppView.detectChanges (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/@angular/core/core.umd.js:9994:22)
at DebugAppView.detectChanges (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/@angular/core/core.umd.js:10084:48)
at ViewRef_.detectChanges (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/@angular/core/core.umd.js:9397:69)
at SafeSubscriber.eval [as _next] (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/scripts/components/product-card.component.js:63:54)
at SafeSubscriber.__tryOrUnsub (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/rxjs/Subject/../bundles/Rx.umd.js:1408:16)
at SafeSubscriber.next (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbn...

Whenever I call detectChanges on a specific component's ChangeDetectorReference:

this._changeDetectorRef.detectChanges();

I found a similar inquiry on Stack Overflow:

What is a dehydrated detector and how am I using one here?

As well as related discussions on GitHub:

https://github.com/angular/angular/issues/6786 https://github.com/angular/angular/issues/6786#issuecomment-185429140

This prompted me to try calling detectChanges differently:

setTimeout( () => this._changeDetectorRef.detectChanges(), 10);

Although this modification resulted in a different error message:

zone.js:260 Uncaught Attempt to use a destroyed view: detectChanges
Zone.runTask @ zone.js:260
ZoneTask.invoke @ zone.js:423

The issue persists, despite the adjustment made with setTimeout. Although it no longer breaks my application (as before), I remain eager to resolve it.

The reason I invoke detectChanges() is due to background processes altering the application state (not due to user input). The component remains active and retains its style in response to these background events.

javascript typescript angular

Answer 1

Answer №1

Ensure to include this code snippet within the constructor of your class:

setTimeout( () => this._changeDetectorRef.markForCheck(), 10);

Also, remember to add the following line in @Component:

changeDetection: ChangeDetectionStrategy.OnPush,

Answer 2

Ensure to include this code snippet within the constructor of your class:

setTimeout( () => this._changeDetectorRef.markForCheck(), 10);

Also, remember to add the following line in @Component:

changeDetection: ChangeDetectionStrategy.OnPush,

Answer 3

Answer №2

My issue arose when a subscribe() function was attempting to run its completion code after the view had already been altered.

...
.then(response => {
    ...
    scope.cdr.detectChanges();
});
...

This problem would occur if I rapidly switched views or experienced slow internet connection.

To solve this, I introduced a boolean that is initially set to true upon view creation:

view_active: Boolean = true

Then, when the view is removed, it is changed to false:

ngOnDestroy() {
    this.view_active = false
}

I then added a check to ensure that detectChanges() is only called if the view is still active:

...
.then(response => {
    ...
    if(scope.view_active) {
        scope.cdr.detectChanges();
    }
});
...

Answer 4

My issue arose when a subscribe() function was attempting to run its completion code after the view had already been altered.

...
.then(response => {
    ...
    scope.cdr.detectChanges();
});
...

This problem would occur if I rapidly switched views or experienced slow internet connection.

To solve this, I introduced a boolean that is initially set to true upon view creation:

view_active: Boolean = true

Then, when the view is removed, it is changed to false:

ngOnDestroy() {
    this.view_active = false
}

I then added a check to ensure that detectChanges() is only called if the view is still active:

...
.then(response => {
    ...
    if(scope.view_active) {
        scope.cdr.detectChanges();
    }
});
...

Answer 5

Answer №3

Alternatively, you have the option to utilize the following code snippet:

import { ChangeDetectorRef, ViewRef } from '@angular/core';

setTimeout(() => {
  if(!(this.changeDetectorRef as ViewRef).destroyed) {
    this._changeDetectorRef.detectChanges();
  }
}, 10);

Answer 6

Alternatively, you have the option to utilize the following code snippet:

import { ChangeDetectorRef, ViewRef } from '@angular/core';

setTimeout(() => {
  if(!(this.changeDetectorRef as ViewRef).destroyed) {
    this._changeDetectorRef.detectChanges();
  }
}, 10);

Angular2 - Error: The view has been destroyed and cannot be updated: detectChanges

Answer №1

Answer №2

Answer №3

Similar questions

Pass JSON data from Angular service to component

Troubleshooting JavaScript in Internet Explorer 9

Is there a method to track the progress of webpage loading?

How can I transfer information from an HTML file (using the ejs template engine) to Node.js?

What could be the reason for the next.js Script tag not loading the third-party script when using the beforeInteractive strategy?

Deciphering the Cause of mapStateToPropsCall in Redux and React

Updating the titles of Bootstrap 4 Switches on the fly

Issue with React and JavaScript: Object is displayed on the console briefly before disappearing

The Vuex this.$store is not defined in the "mounted" lifecycle hook of the component

Determining the type of index to use for an interface

Issue encountered when attempting to import a module within the ionic framework

Is the unit test for attribute failure specific to running it on only one node?

An easy way to incorporate a fade-in effect for every word in a text

Hide the div when hovering occurs

Tips for selecting objects based on property in Typescript?

The Vue v-on:click event listener seems to be unresponsive when applied to a

The height of the iframe with the id 'iframe' is not functioning as expected

The significance of the "$=" or "?=" symbols in lit-element illustrations

Ways to verify the timeframe between two specific dates

Can Angular Material Tabs be customized to have a different style?