Topic: ModalDirective issue

Tech Purchasing free asked 2 years ago


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();


Arkadiusz Idzikowski staff commented 2 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 install command and serve application again with ng serve.


Tech Purchasing free commented 2 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 2 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">



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • User: 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