Closed jeffbdye closed 5 years ago
Image of angular being broken (modal mask/backdrop disappears but modal remains)
Stack trace of error:
ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
at viewDestroyedError (core.es5.js:8451)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13072)
at checkAndUpdateView (core.es5.js:12255)
at callWithDebugContext (core.es5.js:13475)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:13015)
at ViewRef_.webpackJsonp../nodemodules/@angular/core/@angular/core.es5.js.ViewRef.detectChanges (core.es5.js:10181)
at tabset.component.js:90
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:414)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:413)
at Zone../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:181)
at ZoneTask.invoke (zone.js:476)
at timer (zone.js:1491)
at ____Elapsed_417_msAtTue_Apr_09_2019_12_22_42_GMT_0400Eastern_DaylightTime (localhost)
at Object.onScheduleTask (long-stack-trace-zone.js:109)
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (zone.js:394)
at Object.onScheduleTask (zone.js:290)
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (zone.js:394)
at Zone../node_modules/zone.js/dist/zone.js.Zone.scheduleTask (zone.js:225)
at Zone../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask (zone.js:248)
at zone.js:1527
at proto.(/skyux-lib-registration-form-builder/anonymous function) (https://localhost:8000/skyux-lib-registration-form-builder/polyfills.js:18671:20)
at SkyTabsetComponent.webpackJsonp../nodemodules/@skyux/tabs/modules/tabs/tabset.component.js.SkyTabsetComponent.ngAfterViewInit (tabset.component.js:87)
at callProviderLifecycles (core.es5.js:11194)
at callElementProvidersLifecycles (core.es5.js:11169)
at callLifecycleHooksChildrenFirst (core.es5.js:11153)
at checkAndUpdateView (core.es5.js:12263)
at callViewAction (core.es5.js:12620)
at execComponentViewsAction (core.es5.js:12552)
at checkAndUpdateView (core.es5.js:12261)
at callViewAction (core.es5.js:12620)
at execEmbeddedViewsAction (core.es5.js:12578)
at checkAndUpdateView (core.es5.js:12256)
at callWithDebugContext (core.es5.js:13475)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:13015)
at ViewRef.webpackJsonp../nodemodules/@angular/core/@angular/core.es5.js.ViewRef.detectChanges (core.es5.js:10181)
at SkyModalHostComponent.webpackJsonp../node_modules/@skyux/modals/modules/modal/modal-host.component.js.SkyModalHostComponent.open (modal-host.component.js:80)
at SkyModalService.webpackJsonp../node_modules/@skyux/modals/modules/modal/modal.service.js.SkyModalService.open (modal.service.js:22)
at RegistrationFormBuilderComponent.webpackJsonp../src/app/public/src/modules/registration-form-builder/registration-form-builder/registration-form-builder.component.ts.RegistrationFormBuilderComponent.openModal (registration-form-builder.component.ts:242)
at SafeSubscriber._next (registration-form-builder.component.ts:136)
at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at FilterSubscriber.webpackJsonp../node_modules/rxjs/operator/filter.js.FilterSubscriber._next (filter.js:87)
at FilterSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at PairwiseSubscriber.webpackJsonp../node_modules/rxjs/operator/pairwise.js.PairwiseSubscriber._next (pairwise.js:68)
at PairwiseSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at DistinctUntilChangedSubscriber.webpackJsonp../node_modules/rxjs/operator/distinctUntilChanged.js.DistinctUntilChangedSubscriber._next (distinctUntilChanged.js:103)
at DistinctUntilChangedSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at MapSubscriber.webpackJsonp../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83)
at MapSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at MapSubscriber.webpackJsonp../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83)
at MapSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at ReplaySubject.webpackJsonp../node_modules/rxjs/Subject.js.Subject.next (Subject.js:55)
at ReplaySubject.webpackJsonp../node_modules/rxjs/ReplaySubject.js.ReplaySubject.next (ReplaySubject.js:31)
at SafeSubscriber._next (store-devtools.es5.js:573)
at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at ScanSubscriber.webpackJsonp../node_modules/rxjs/operator/scan.js.ScanSubscriber._tryNext (scan.js:115)
at ScanSubscriber.webpackJsonp../node_modules/rxjs/operator/scan.js.ScanSubscriber._next (scan.js:102)
at ScanSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at WithLatestFromSubscriber.webpackJsonp../node_modules/rxjs/operator/withLatestFrom.js.WithLatestFromSubscriber._next (withLatestFrom.js:113)
at WithLatestFromSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at Notification.webpackJsonp../node_modules/rxjs/Notification.js.Notification.observe (Notification.js:32)
at QueueAction.webpackJsonp../node_modules/rxjs/operator/observeOn.js.ObserveOnSubscriber.dispatch (observeOn.js:87)
at QueueAction.webpackJsonp../node_modules/rxjs/scheduler/AsyncAction.js.AsyncAction._execute (AsyncAction.js:111)
at QueueAction.webpackJsonp../node_modules/rxjs/scheduler/QueueAction.js.QueueAction.execute (QueueAction.js:33)
at QueueScheduler.webpackJsonp../node_modules/rxjs/scheduler/AsyncScheduler.js.AsyncScheduler.flush (AsyncScheduler.js:36)
at QueueAction.webpackJsonp../node_modules/rxjs/scheduler/QueueAction.js.QueueAction.schedule (QueueAction.js:27)
at QueueScheduler.webpackJsonp../node_modules/rxjs/Scheduler.js.Scheduler.schedule (Scheduler.js:43)
at ObserveOnSubscriber.webpackJsonp../node_modules/rxjs/operator/observeOn.js.ObserveOnSubscriber.scheduleMessage (observeOn.js:91)
at ObserveOnSubscriber.webpackJsonp../node_modules/rxjs/operator/observeOn.js.ObserveOnSubscriber._next (observeOn.js:94)
at ObserveOnSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at MergeAllSubscriber.webpackJsonp../node_modules/rxjs/OuterSubscriber.js.OuterSubscriber.notifyNext (OuterSubscriber.js:19)
at InnerSubscriber.webpackJsonp../node_modules/rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23)
at InnerSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at MapSubscriber.webpackJsonp../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83)
at MapSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at MergeAllSubscriber.webpackJsonp../node_modules/rxjs/OuterSubscriber.js.OuterSubscriber.notifyNext (OuterSubscriber.js:19)
at InnerSubscriber.webpackJsonp../node_modules/rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23)
at InnerSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at SkipSubscriber.webpackJsonp../node_modules/rxjs/operator/skip.js.SkipSubscriber._next (skip.js:46)
at SkipSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at ActionsSubject.webpackJsonp../node_modules/rxjs/Subject.js.Subject.next (Subject.js:55)
at ActionsSubject.webpackJsonp../node_modules/rxjs/BehaviorSubject.js.BehaviorSubject.next (BehaviorSubject.js:44)
at ActionsSubject.webpackJsonp../node_modules/@ngrx/store/@ngrx/store.es5.js.ActionsSubject.next (store.es5.js:126)
at Store.webpackJsonp../node_modules/@ngrx/store/@ngrx/store.es5.js.Store.dispatch (store.es5.js:402)
at SafeSubscriber._next (registration-form-builder.component.ts:181)
at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at FilterSubscriber.webpackJsonp../node_modules/rxjs/operator/filter.js.FilterSubscriber._next (filter.js:87)
at FilterSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at CombineLatestSubscriber.webpackJsonp../node_modules/rxjs/operator/combineLatest.js.CombineLatestSubscriber.notifyNext (combineLatest.js:134)
at InnerSubscriber.webpackJsonp../node_modules/rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23)
at InnerSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at Subject.webpackJsonp../node_modules/rxjs/Subject.js.Subject.next (Subject.js:55)
at Object.eval [as handleEvent] (RegistrationFormBuilderComponent.html:33)
at handleEvent (core.es5.js:12014)
at callWithDebugContext (core.es5.js:13475)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:13063)
at dispatchEvent (core.es5.js:8607)
at core.es5.js:10775
at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647)
at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at EventEmitter.webpackJsonp../node_modules/rxjs/Subject.js.Subject.next (Subject.js:55)
at EventEmitter.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.EventEmitter.emit (core.es5.js:3621)
at Object.eval [as handleEvent] (FormTemplateSummaryItemComponent.html:24)
at handleEvent (core.es5.js:12014)
at callWithDebugContext (core.es5.js:13475)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:13063)
at dispatchEvent (core.es5.js:8607)
at core.es5.js:9218
at HTMLButtonElement.
Right on, thanks y'all!
Expected behavior
Modal closes, can be reopened, then closed again without issue.
Actual behavior
Modal closes, reopens, then upon closing again angular is broken.
Steps to reproduce
ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
and an error is printed to console.This is very likely due to the setTimeout in the tabset's afterViewInit here getting called after the modal has been destroyed: https://github.com/blackbaud/skyux-tabs/blob/e93b456d2229c695dd40d05433df25ad8f13fb6c/src/app/public/modules/tabs/tabset.component.ts#L153-L157
Plunker
https://github.com/jeffbdye/skyux-spa-modal-tabs-issue
Severity
Angular must be refreshed after this issue occurs, the SPA is effectively unusable. Seems pretty severe.
Impact
Only affects SPAs which have modals with tabsets, and only if a user happens to immediately close the modal after opening it. So probably unlikely.