Angular2 - Not Available Attempting to use a shattered view: detectChanges

Question

So my application continues to give me this 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://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/rxjs/Subject/../bundles/Rx.umd.js:1357:22) at Subscriber._next (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/rxjs/Subject/../bundles/Rx.umd.js:1307:26) at Subscriber.next (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/rxjs/Subject/../bundles/Rx.umd.js:1271:18) at Subject._finalNext (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/rxjs/Subject/../bundles/Rx.umd.js:1063:30) at Subject._next (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/rxjs/Subject/../bundles/Rx.umd.js:1055:18) at Subject.next (chrome-extension://npblbblmbmcjbldhcneoocaobkkicbno/node_modules/rxjs/Subject/../bundles/Rx.umd.js:1012:14)handler @ extensions::uncaught_exception_handler:8(anonymous function) @ extensions::uncaught_exception_handler:100EventImpl.dispatch_ @ extensions::event_bindings:376EventImpl.dispatch @ extensions::event_bindings:393target.(anonymous function) @ extensions::SafeBuiltins:19publicClass.(anonymous function) @ extensions::utils:94messageListener @ extensions::messaging:189target.(anonymous function) @ extensions::SafeBuiltins:19EventImpl.dispatchToListener @ extensions::event_bindings:387target.(anonymous function) @ extensions::SafeBuiltins:19publicClass.(anonymous function) @ extensions::utils:94EventImpl.dispatch_ @ extensions::event_bindings:371EventImpl.dispatch @ extensions::event_bindings:393target.(anonymous function) @ extensions::SafeBuiltins:19publicClass.(anonymous function) @ extensions::utils:94dispatchOnMessage @ extensions::messaging:320 

When calling detectChanges for the ChangeDetectorReference component: this._changeDetectorRef.detectChanges();

I came across a similar stack for the question:

What is a dehydrated detector and how do I use it here?

and some github problems:

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

This led me to call detectChanges as such:

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

What changed this error:

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

But this is still happening. This does not violate my application (this was before using setTimeout), but I would like to figure out how to get rid of it.

I call detectChanges () because in the background there are events that change the state of the application (and not the result of user input). The component is not created and cannot be destroyed when the detectChanges () function is called. The component's style changes as a result of something that happens in the background.

Answer 1

In the constructor of your class:

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

And in @component:

 changeDetection: ChangeDetectionStrategy.OnPush, 

Answer 2

My errors were thrown out because subscribe() tried to execute its completion code after the view has already changed.

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

This will happen if I switch my eyes very fast or the Internet is slow.

---

I created a boolean when the view was created and set to true:

 view_active: Boolean = true 

then when you destroy the view, set it to false:

 ngOnDestroy() { this.view_active = false } 

and then check this before calling detectChanges()

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

Answer 3

Or you can use this:

 import { ChangeDetectorRef, ViewRef } from '@angular/core'; setTimeout(() => { if(!(this.changeDetectorRef as ViewRef).destroyed) { this._changeDetectorRef.detectChanges(); } }, 10);