Attempt to use a dehydrated detector: ... -> onClose

josephwongcl commented 8 years ago

I'm stumped on an issue where if ComponentA (route: ./componentA) opens up a modal, and the component routes you to ComponentB (route: ./componentB), I get a crash with the following log:

angular2.js?1458337616513:23597 EXCEPTION: Attempt to use a dehydrated detector: NavbarComponent_0 -> onClose

Alongside with the exception, the app is properly routed to ComponentB, but it has the black transparent background stuck on the screen and I'm unable to get past it.

It's a bit urgent that I fix this and any workaround is welcome, thanks!

Full stack trace:

-----async gap----- Error at _getStacktraceWithUncaughtError (http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js?1458337616512:2244:29) at Zone.fork (http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js?1458337616512:2293:47) at arguments.(anonymous function) (http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js?1458337616512:1671:82)

-----async gap----- Error at _getStacktraceWithUncaughtError (http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js?1458337616512:2244:29) at Zone.fork (http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js?1458337616512:2293:47) at Zone.bind (http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js?1458337616512:1218:53) at bindArguments (http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js?1458337616512:1401:36) at lib$es6$promise$promise$$Promise.obj.(anonymous function) as then at NavbarComponent.onLogoutUserClicked (http://localhost:5555/app/components/shared/navbar.component.js:44:35) at AbstractChangeDetector.ChangeDetector_NavbarComponent_0.handleEventInternal (viewFactory_NavbarComponent:468:38) at AbstractChangeDetector.handleEvent (http://localhost:5555/node_modules/angular2/bundles/angular2.js?1458337616513:8115:25) at AppView.triggerEventHandlers (http://localhost:5555/node_modules/angular2/bundles/angular2.js?1458337616513:10815:34) at eval (viewFactory_NavbarComponent:1094:120)

josephwongcl commented 8 years ago

I should mention I've tried closing the modal prior to the routing, but the issue still comes up.

dougludlow commented 8 years ago

I'll take a look at it this evening.

dougludlow commented 8 years ago

It would be helpful, if you could provide any code samples or a plunkr that replicates the issue.

josephwongcl commented 8 years ago

I've found a hacky work around where I first close the modal, then wait 500ms before routing to the next page.

I highly suspect it's something to do with the animation.

Just a snippet from my side:

  onUserSuccessfullyLoggedIn(user) : void {
    this.modal.close();

    setTimeout(() => {
        this.router.parent.navigate(['./JobsList']);
    }, 500);
  }

I'm in the middle of a crazy project push at my work place right now, when I find time I'll mock up something more in-depth on plunkr.

BTW, thanks for the quick reply, really appreciate it!

marcodelgatto commented 8 years ago

Same problem here :)

dougludlow commented 8 years ago

Appears to be related to angular/angular#6786.

dougludlow commented 8 years ago

I was able to reproduce the issue as a test and resolved it by using a synchronous EventEmitter.

dougludlow commented 8 years ago

I've released it as v0.2.2. Give it a try and let me know how it goes @ninchuu, @marcodelgatto.

marcodelgatto commented 8 years ago

Thanks for your time. Unluckily, it still doesn’t work for me, I’ve tried both version 0.2.2 and 0.3.0. Actually there are two seeming different issues:

Issue 1: If the user click on the gray overlay when the modal is open, the modal closes; but if he then tries to open it again this error comes up in console: “Task does not support cancellation, or is already canceled. at ZoneDelegate.cancelTask”

Issue 2: if you close the modal programmatically, after of before emitting an event to parent container(s) which causes a DOM refresh, the modal doesn’t close well: on certain situations the modal disappear but the gray overlay remains, in other cases you get the error “Attempt to use a dehydrated detector…”

Marco

marcodelgatto commented 8 years ago

More precisely, I’ve found that issue #1 happens every time a user tries to reopen a modal which was previously closed, so it seems to be a more general problem.

dougludlow commented 8 years ago

@marcodelgatto I saw the "Task does not support cancellation, or is already canceled. at ZoneDelegate.cancelTask" error crop up after using any version of angular above beta.9. There is an issue open for it here: https://github.com/angular/angular/issues/7671.

dougludlow commented 8 years ago

@marcodelgatto I've addressed an issue where the modal wasn't closed on destroy and the overlay was left on top in v0.3.1. That should hopefully resolve your issue there. Again, I'd recommend using beta.9 until angular/angular#7671 is fixed/released.

marcodelgatto commented 8 years ago

I will give a try in the next days and let you know. Thanks for now.

dougludlow commented 8 years ago

@marcodelgatto, any update on this?

@ninchuu are you still experiencing issues?

dougludlow commented 8 years ago

Just FYI, in v0.4 I've done a bit of a rewrite on the modal internals. It should play much better with routing and cancelling. You might check that out. The max working angular version is still beta.9. Hopefully beta.13 will solve the "Task does not support cancellation, or is already canceled." issues.

marcodelgatto commented 8 years ago

Hi @dougludlow , since I was in a hurry, I had to change component and I used ng2-modal (https://www.npmjs.com/package/ng2-modal), which is simpler than yours - since it doesn't handle the animation task - and probably just for that it circumvents the angular problem with the Task. When I will finish the project I will try a refactor with your upgraded component. Thank you

dougludlow commented 8 years ago

@marcodelgatto, cool cool, glad you were able to get things running on your project. Yeah, let me know how the refactor goes when you get around to it. I'd love more feedback.

dougludlow commented 8 years ago

It appears like the "Task does not support cancellation, or is already canceled." issue is fixed in angular2@beta.12.

dougludlow / ng2-bs3-modal

Attempt to use a dehydrated detector: ... -> onClose #15