Topic: ModalDirective issue
we have upgraded from NG UI Toolkit 7.1.2 to 9.3.1 and started seeing below issue:
Getting the below error on invoking show function of a ModalDirective and its not getting shown at all:
ERROR TypeError: Cannot read property 'backdrop' of undefined at ModalDirective.push../node_modules/ng-uikit-pro-standard/__ivy_ngcc__/fesm5/ng-uikit-pro-standard.js.ModalDirective.showBackdrop (vendor.js:245648) at ModalDirective.push../node_modules/ng-uikit-pro-standard/__ivy_ngcc__/fesm5/ng-uikit-pro-standard.js.ModalDirective.show (vendor.js:245533)
Code Snippet:
@ViewChild('searchDetailModal') searchDetailModal:
ModalDirective;this.searchDetailModal.show();
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: Desktop
- Browser: Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 3 years ago
Please provide full HTML/TS code on which we will be able to reproduce this problem.
You can try to remove the node_modules and package-lock.json, reinstall your dependencies with
npm installcommand and serve application again withng serve.Tech Purchasing free commented 3 years ago
Posted the code snippet below and also the view is full of these errors:
ERROR TypeError: Cannot read property 'querySelector' of undefined at MdbInputDirective.push../node_modules/ng-uikit-pro-standard/ivy_ngcc/fesm5/ng-uikit-pro-standard.js.MdbInputDirective.initComponent (ng-uikit-pro-standard.js:8425) at MdbInputDirective.push../node_modules/ng-uikit-pro-standard/ivy_ngcc/fesm5/ng-uikit-pro-standard.js.MdbInputDirective.ngAfterViewChecked (ng-uikit-pro-standard.js:8397) at callHook (core.js:2974) at callHooks (core.js:2940) at executeInitAndCheckHooks (core.js:2892) at refreshView (core.js:7697) at refreshComponent (core.js:8772) at refreshChildComponents (core.js:7419) at refreshView (core.js:7676) at refreshEmbeddedViews (core.js:8726) defaultErrorLogger @ core.js:4127 push../node_modules/@angular/core/ivy_ngcc/fesm5/core.js.ErrorHandler.handleError @ core.js:4175 (anonymous) @ core.js:29108 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150 push../node_modules/@angular/core/ivy_ngcc/fesm5/core.js.NgZone.runOutsideAngular @ core.js:28084 push../node_modules/@angular/core/ivy_ngcc/fesm5/core.js.ApplicationRef.tick @ core.js:29108 (anonymous) @ core.js:28964 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 onInvoke @ core.js:28144 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150 push../node_modules/@angular/core/ivy_ngcc/fesm5/core.js.NgZone.run @ core.js:28039 next @ core.js:28963 schedulerFn @ core.js:25516 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:192 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/__ivy_ngcc/fesm5/core.js.EventEmitter.emit @ core.js:25498 checkStable @ core.js:28094 onLeave @ core.js:28190 onInvokeTask @ core.js:28138 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498 ZoneTask.invoke @ zone.js:487 timer @ zone.js:2281 setTimeout (async) scheduleTask @ zone.js:2302 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410 onScheduleTask @ zone.js:301 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238 push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261 scheduleMacroTaskWithCurrentZone @ zone.js:1245 (anonymous) @ zone.js:2317 proto.(anonymous function) @ zone.js:1569 push../node_modules/ag-grid-community/dist/lib/eventService.js.EventService.dispatchAsync @ eventService.js:158 (anonymous) @ eventService.js:138 push../node_modules/ag-grid-community/dist/lib/utils/general.js.Utils.forEachSnapshotFirst @ general.js:1374 push../node_modules/ag-grid-community/dist/lib/eventService.js.EventService.dispatchToListeners @ eventService.js:136 push../node_modules/ag-grid-community/dist/lib/eventService.js.EventService.dispatchEvent @ eventService.js:104 push../node_modules/ag-grid-community/dist/lib/rowModels/clientSide/clientSideRowModel.js.ClientSideRowModel.setRowData @ clientSideRowModel.js:597 push../node_modules/ag-grid-community/dist/lib/gridApi.js.GridApi.setRowData @ gridApi.js:149 push../node_modules/ag-grid-community/dist/lib/components/componentUtil.js.ComponentUtil.processOnChange @ componentUtil.js:123 push../node_modules/ag-grid-angular/ivy_ngcc/dist/agGridAngular.js.AgGridAngular.ngOnChanges @ agGridAngular.js:399 wrapOnChangesHook_inPreviousChangesStorage @ core.js:19474 callHook @ core.js:2974 callHooks @ core.js:2940 executeCheckHooks @ core.js:2873 refreshView @ core.js:7635 refreshComponent @ core.js:8772 refreshChildComponents @ core.js:7419 refreshView @ core.js:7676 refreshComponent @ core.js:8772 refreshChildComponents @ core.js:7419 refreshView @ core.js:7676 refreshEmbeddedViews @ core.js:8726 refreshView @ core.js:7650 refreshComponent @ core.js:8772 refreshChildComponents @ core.js:7419 refreshView @ core.js:7676 renderComponentOrTemplate @ core.js:7740 tickRootContext @ core.js:8944 detectChangesInRootView @ core.js:8969 push../node_modules/@angular/core/ivy_ngcc/fesm5/core.js.RootViewRef.detectChanges @ core.js:10370 push../node_modules/@angular/core/ivy_ngcc/fesm5/core.js.ApplicationRef.tick @ core.js:29080 (anonymous) @ core.js:28964 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 onInvoke @ core.js:28144 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150 push../node_modules/@angular/core/ivy_ngcc/fesm5/core.js.NgZone.run @ core.js:28039 next @ core.js:28963 schedulerFn @ core.js:25516 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:192 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/__ivy_ngcc/fesm5/core.js.EventEmitter.emit @ core.js:25498 checkStable @ core.js:28094 onLeave @ core.js:28190 onInvokeTask @ core.js:28138 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498 invokeTask @ zone.js:1744 globalZoneAwareCallback @ zone.js:1770 Show 60 more frames
Tech Purchasing free commented 3 years ago
Below is the modal definition (removed some symbols else its not allowing me to paste it)
div mdbModal #searchDetailModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true"> div class="modal-dialog modal-dialog-scrollable model-tradeDetail modal-lg" role="document" style="overflow-y: initial !important"> div class="modal-content"> div class="modal-header"> × div class="modal-body" style="height: 900px; overflow-y: auto;" *ngIf="this.hasBeenActive">