angular: EXCEPTION: Attempt to use a dehydrated detector.

this.router.navigate(['/Search']);

gives exception “Attempt to use a dehydrated detector” since Angular 2 beta 2. Despite the error my app navigates correctly.

No exception is thrown in beta 1 or beta 0.

Complete stacktrace:

Error: Attempt to use a dehydrated detector.
    at DehydratedException.BaseException [as constructor] (https://mysite.com.localhost/app.js:23:18903)
    at new DehydratedException (https://mysite.com.localhost/app.js:15:14756)
    at AbstractChangeDetector.throwDehydratedError (https://mysite.com.localhost/app.js:12:14458)
    at AbstractChangeDetector.handleEvent (https://mysite.com.localhost/app.js:12:6180)
    at AbstractChangeDetector.eval (viewFactory_HomeComponent:315:107)
    at https://mysite.com.localhost/app.js:23:6253
    at cb (https://mysite.com.localhost/app.js:23:2204)
    at arguments.(anonymous function) (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:493:24)
    at https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:118:23
    at Zone.run (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:138:17)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:2195:26)
    at Zone.fork (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:2253:40)
    at Zone.bind (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:109:48)
    at Zone.bindOnce (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:117:17)
    at bindArgumentsOnce (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:989:29)
    at global.zone.(anonymous function) (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:495:20)
    at https://mysite.com.localhost/app.js:23:2273
    at obj.(anonymous function) (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:502:37)
    at Subscriber.<anonymous> (https://mysite.com.localhost/app.js:23:6208)
    at Subscriber.tryCatcher [as _next] (https://mysite.com.localhost/app.js:29:9030)

-----async gap-----
Error
    at _getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:2195:26)
    at Zone.fork (https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js:2253:40)
    at NgZone._createInnerZone (https://mysite.com.localhost/app.js:23:950)
    at new NgZone (https://mysite.com.localhost/app.js:22:29783)
    at createNgZone (https://mysite.com.localhost/app.js:11:24921)
    at PlatformRef_.application (https://mysite.com.localhost/app.js:11:26769)
    at bootstrap (https://mysite.com.localhost/app.js:1:13748)
    at Object.3../app.component (https://mysite.com.localhost/app.js:1:3520)
    at s (https://mysite.com.localhost/app.js:1:254)
    at e (https://mysite.com.localhost/app.js:1:425)

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 51 (9 by maintainers)

Commits related to this issue

fix: use synchronous event emitters to workaround dehydrated detectors - see https://github.com/angular/angular/issues/6786#issuecomment-183475058 - todo: revisit if the #6786 issue finds resolutio... — committed to justindujardin/ng2-material by justindujardin 8 years ago
[ex] Attempt to use a dehydrated detector seems to be problem with form, but didn't have it until I add router naviagtion. — committed to at15/bform-web by at15 8 years ago

Most upvoted comments

I found a reason causes the dehydration error. See my plunker

http://plnkr.co/edit/sPPRRxnFuZFSH8RmPaH7?p=preview

Pattern1: ngSubmit `<form (ngSubmit)="goToRoot()">`

If we use (ngSubmit) to navigate, no error occurs.

NgSubmit: activated
NgSubmit: onSubmit
NgSubmit: deactivated
NgSubmit: destroy
Root: activated
NgSubmit: navigate:done

Pattern2: Submit `<form (submit)="goToRoot()"`>`

If we use (submit) to navigate, the error occurs. All operation runs in correct order, but somehow, ngSubmit event causes.

Submit: activated
Submit: onSubmit
Submit: deactivated
Submit: destroy
Root: activated
Submit: navigate:done
EXCEPTION: Attempt to use a dehydrated detector: SubmitCmp_0 -> ngSubmit

hypothesis

When we handled submit event, ngSubmit event happened too. But ngSubmit is too late. already component has been dehydrated.

The story also can be applied to (change) and (ngModelChange). This is a collision between native event and Angular output

@PascalPrecht How do you think about my story?

lacolaco on Mar 16, 2016

I face the same issue as this.

kumargandhi on May 30, 2016

I use ngSubmit and see this issue

On Sat, 19 Mar 2016 at 14:40, Yann Lebel notifications@github.com wrote:

@laco0416 https://github.com/laco0416 Using ngSubmit fixed the issue for me as well

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/angular/angular/issues/6786#issuecomment-198705354

e-oz on Mar 19, 2016

@laco0416 Using ngSubmit fixed the issue for me as well

yannlebel on Mar 19, 2016

This issue is still present in 2.0.0-beta.9 for me. I was able to get around the issue by adding the following empty function declaration to my component:

public ngOnDestroy():void {
}

jasdeepsingh on Mar 16, 2016

I’m not sure this is a good idea. Searching issues for error messages doesn’t reveal issues that contain the content only in linked Gists. Is there some official guideline?

zoechi on Mar 8, 2016

This is the minimized plunker example to reproduce this error. http://plnkr.co/edit/yVX5dq7zpwn1uTe1Nj19?p=preview

export class FooComponent {
  constructor(
    private router: Router
  ){}

 @Output() fooEvent: EventEmitter<any> = new EventEmitter();
 fireEvent: void() {
   this.router.navigate( ['Bar'] );
   this.fooEvent.emit(null);
 }
}

Without router.navigate(), it works fine. However, it’s necessary for common cases.

   //this.router.navigate( ['Bar'] );
   this.fooEvent.emit(null);

Only one solution that I found is to use synchronous new EventEMitter(false)

 @Output() fooEvent: EventEmitter<any> = new EventEmitter(false);

allenhwkim on Mar 2, 2016