Angular2 EXCEPTION: Attempt to detect changes on a dehydrated detector

Question

I am having this error EXCEPTION: Attempt to detect changes on a dehydrated detector. and after reading a few online pages. I have not very clear how to fix it or b

Answer 1

After reading the commentary Eric Martinez. I solved in my case using OnDestroy and detach() in the tests I've done it seems to work well hope it helps others.

    import {Component, ChangeDetectorRef, OnDestroy} from "angular2/core";
    ..//

    export class Test implements OnDestroy{
    ..//

    constructor(http: Http, public ref: ChangeDetectorRef){
    ..//

            setInterval(() => {
              this.ref.detectChanges();
            }, 5000);

    }

    ngOnDestroy(){
      this.ref.detach();
    }

NOTE: I'm new to Angular2 and do not know if this really is the best solution

Answer 2

Implement the OnDestroy in your component class by importing as below

import { Component, OnDestroy } from '@angular/core';

Then do as below

ngAfterViewInit() { // *Bind when component loads
    console.log('onLoad');
    this.zone.reattach();
}

detectChanges(val: any){ // * Runs outside Angular Code
  /*Your codes and logic*/
  this.intrv = setInterval(()=>{
    this.zone.detectChanges();
  }, 1000)
}

ngOnDestroy() { // * Clean after leave. Clear any intervals or setTimeouts here.
   this.zone.detach();
   if(this.intrv){ //Making sure everything is removed
     clearInterval(this.intrv);
   }
}

Read the code comments for explaination. Above code saved me from the errors.

---

Explaination:

• Bind to the change detector API on intialization using ngAfterViewInit()
• Listen to the Code outside angular and apply changes to the Model
• When you move out of the view. detach the change Detector using ngOnDestroy()

---

Documentation:

• https://angular.io/docs/js/latest/api/core/index/ChangeDetectorRef-class.html#!#detach-anchor
• https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval#Example