title: Angular2 - Uncaught Attempt to use a destroyed view: detectChanges
body: <p>So my application keeps giving me this error:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Upon calling detectChanges on a component's ChangeDetectorReference: <code>this._changeDetectorRef.detectChanges();</code></p>
  
  <p>I came across a similar stack over question:</p>
  
  <p><a href="https://stackoverflow.com/questions/35515254/what-is-a-dehydrated-detector-and-how-am-i-using-one-here">What is a dehydrated detector and how am I using one here?</a></p>
  
  <p>and some github issues:</p>
  
  <p><a href="https://github.com/angular/angular/issues/6786" rel="nofollow noreferrer">https://github.com/angular/angular/issues/6786</a>
  <a href="https://github.com/angular/angular/issues/6786#issuecomment-185429140" rel="nofollow noreferrer">https://github.com/angular/angular/issues/6786#issuecomment-185429140</a></p>
  
  <p>That led me to call detectChanges as such:</p>
  
  <p><code>setTimeout( () =&gt; this._changeDetectorRef.detectChanges(), 10);</code></p>
  
  <p>Which changed the error to this:</p>
  
  <pre><code>zone.js:260 Uncaught Attempt to use a destroyed view: detectChanges
  Zone.runTask @ zone.js:260
  ZoneTask.invoke @ zone.js:423
  </code></pre>
  
  <p>But it is still happening.  It is not breaking my application (it was before using setTimeout), but I would like to figure out how to get rid of it.</p>
  
  <p>I'm calling detectChanges() because there are things happening in the background that change the state of the application (not the result of user input).  The component is not newly created or about to be destroyed when detectChanges() is called. The component's style changes as a result of something that happens in the background.</p>