ObaidUrRehman / ng-drag-drop

Drag & Drop for Angular - based on HTML5 with no external dependencies. :tada:
MIT License
239 stars 123 forks source link

Droppable unsubscribed and fails on subsequent calls to page #43

Closed amdefran closed 7 years ago

amdefran commented 7 years ago

When I leave and enter a page multiple times, I am getting an object unsubscribed error from the droppable directive. The usage looks like:

<div class="empty-document-view-item" droppable (onDrop)="onItemDrop($event)"> Drag and drop documents here to create summary. </div>

The error I am seeing is:

`ERROR Error: Uncaught (in promise): ObjectUnsubscribedError: object unsubscribed Error: object unsubscribed at ObjectUnsubscribedError.ZoneAwareError (zone.js:917) at new ObjectUnsubscribedError (:11000/lib/rxjs/util/ObjectUnsubscribedError.js:19) at Subject._trySubscribe (:11000/lib/rxjs/Subject.js:94) at Subject.Observable.subscribe (:11000/lib/rxjs/Observable.js:45) at Droppable.ngOnInit (:11000/lib/ng2-drag-drop/src/directives/droppable.js:38) at checkAndUpdateDirectiveInline (:11000/lib/@angular/core/bundles/core.umd.js:10718) at checkAndUpdateNodeInline (:11000/lib/@angular/core/bundles/core.umd.js:12097) at checkAndUpdateNode (:11000/lib/@angular/core/bundles/core.umd.js:12065) at debugCheckAndUpdateNode (:11000/lib/@angular/core/bundles/core.umd.js:12694) at debugCheckDirectivesFn (:11000/lib/@angular/core/bundles/core.umd.js:12635) at Object.eval [as updateDirectives] (ng:///HomeComponentModule/DocumentViewerComponent.ngfactory.js:151) at Object.debugUpdateDirectives [as updateDirectives] (:11000/lib/@angular/core/bundles/core.umd.js:12620) at checkAndUpdateView (:11000/lib/@angular/core/bundles/core.umd.js:12032) at callViewAction (:11000/lib/@angular/core/bundles/core.umd.js:12347) at execComponentViewsAction (:11000/lib/@angular/core/bundles/core.umd.js:12293) at ObjectUnsubscribedError.ZoneAwareError (zone.js:917) at new ObjectUnsubscribedError (:11000/lib/rxjs/util/ObjectUnsubscribedError.js:19) at Subject._trySubscribe (:11000/lib/rxjs/Subject.js:94) at Subject.Observable.subscribe (:11000/lib/rxjs/Observable.js:45) at Droppable.ngOnInit (:11000/lib/ng2-drag-drop/src/directives/droppable.js:38) at checkAndUpdateDirectiveInline (:11000/lib/@angular/core/bundles/core.umd.js:10718) at checkAndUpdateNodeInline (:11000/lib/@angular/core/bundles/core.umd.js:12097) at checkAndUpdateNode (:11000/lib/@angular/core/bundles/core.umd.js:12065) at debugCheckAndUpdateNode (:11000/lib/@angular/core/bundles/core.umd.js:12694) at debugCheckDirectivesFn (:11000/lib/@angular/core/bundles/core.umd.js:12635) at Object.eval [as updateDirectives] (ng:///HomeComponentModule/DocumentViewerComponent.ngfactory.js:151) at Object.debugUpdateDirectives [as updateDirectives] (:11000/lib/@angular/core/bundles/core.umd.js:12620) at checkAndUpdateView (:11000/lib/@angular/core/bundles/core.umd.js:12032) at callViewAction (:11000/lib/@angular/core/bundles/core.umd.js:12347) at execComponentViewsAction (:11000/lib/@angular/core/bundles/core.umd.js:12293) at resolvePromise (zone.js:712) [angular] at resolvePromise (zone.js:683) [angular] at :11000/lib/zone.js/dist/zone.js:760:17 [angular] at Object.onInvokeTask (:11000/lib/@angular/core/bundles/core.umd.js:4123) [angular] at ZoneDelegate.invokeTask (zone.js:397) [angular] at Zone.runTask (zone.js:165) [ => angular] at drainMicroTaskQueue (zone.js:593) [] at ZoneTask.invoke (zone.js:464) [] at timer (zone.js:1540) [] defaultErrorLogger @ :11000/lib/@angular/core/bundles/core.umd.js:1091 ErrorHandler.handleError @ :11000/lib/@angular/core/bundles/core.umd.js:1151 next @ :11000/lib/@angular/core/bundles/core.umd.js:4761 schedulerFn @ :11000/lib/@angular/core/bundles/core.umd.js:3835 SafeSubscriber.__tryOrUnsub @ :11000/lib/rxjs/Subscriber.js:236 SafeSubscriber.next @ :11000/lib/rxjs/Subscriber.js:185 Subscriber._next @ :11000/lib/rxjs/Subscriber.js:125 Subscriber.next @ :11000/lib/rxjs/Subscriber.js:89 Subject.next @ :11000/lib/rxjs/Subject.js:55 EventEmitter.emit @ :11000/lib/@angular/core/bundles/core.umd.js:3821 NgZone.triggerError @ :11000/lib/@angular/core/bundles/core.umd.js:4192 onHandleError @ :11000/lib/@angular/core/bundles/core.umd.js:4153 ZoneDelegate.handleError @ zone.js:369 Zone.runGuarded @ zone.js:141 _loop_1 @ zone.js:604 drainMicroTaskQueue @ zone.js:613 ZoneTask.invoke @ zone.js:464 timer @ zone.js:1540'

Notice the error Droppable.ngOnInit (:11000/lib/ng2-drag-drop/src/directives/droppable.js:38).

The line is

this.ng2DragDropService.onDragStart.subscribe(function () {

which is unsubscribed when I leave the page the first time. I wasn't sure if I was missing something or not.

Thanks.

rrohitesh commented 7 years ago

Hi Obaid,

I am also getting the same error when i visit the particular page and without doing any operation if i leave the page i am getting

ErrorUncaught (in promise): Error: object unsubscribed
Error: object unsubscribed
    at ObjectUnsubscribedError.ZoneAwareError (http://localhost:8425/js/polyfills.db007e751a9f2466ba3f.js:16526:34)
    at new ObjectUnsubscribedError (http://localhost:8425/js/vendor.db007e751a9f2466ba3f.js:13854:27)
    at Subject._trySubscribe (http://localhost:8425/js/vendor.db007e751a9f2466ba3f.js:13007:20)
    at Subject.Observable.subscribe (http://localhost:8425/js/vendor.db007e751a9f2466ba3f.js:13131:28)
    at Droppable.ngOnInit (http://localhost:8425/js/app.db007e751a9f2466ba3f.js:65678:46)
    at Wrapper_Droppable.ngDoCheck (/Ng2DragDropModule/Droppable/wrapper.ngfactory.js:58:73)

Just wanted to add what i observed:

if i am doing some operation i.e drag and drop on the container and then saving then data after some time if i am again navigating to the same page to edit the data then also it causing the same exception.

ObaidUrRehman commented 7 years ago

Thanks for pointing this one out guys. Fixed in v1.5.1

rrohitesh commented 7 years ago

Thank you very much for your fast response :) i really appreciate it :+1:

amdefran commented 7 years ago

Wow, that was fast. Thank you for fixing so quickly. Also, I would like to add that I love this package, it is very clean and well designed.