ngx-bootstrap: bug(modal): Cannot read property 'body' of undefined (document not injected)

First off: Great job on the modal. Very easy to use.

I have a situation where I close the modal, and perform an action -> where the action ends up taking me somewhere else within my app.

I do something like this : (click)="dealReviewModal.hide(); confirmDeal();"

My confirmDeal() will do some work and will change the display of the page… but this error shows up:

browser_adapter.ts:78 TypeError: Cannot read property 'body' of undefined
    at ModalDirective.resetScrollbar (modal.component.js:281)
    at modal.component.js:178
    at callbackRemove (modal.component.js:210)
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.ts:56)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at ZoneTask.invoke (zone.js:423)BrowserDomAdapter.logError @ browser_adapter.ts:78ExceptionHandler.call @ exception_handler.ts:57(anonymous function) @ application_ref.ts:304schedulerFn @ async.ts:131SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.ts:117NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:138NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:90ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423

The curious aspect that I have found is that within my confirmDeal(), if I set a setTimeout of 500ms, then the modal hides, and everything works as it should.

Any ideas?

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 17 (5 by maintainers)

Most upvoted comments

@jppellerin

I have exactley the same problem. I want the redirect the user to another route, after the modal has closed. To fix it in the meanwhile I used this stupid solution:

Template

 (click)="hideModal()"

Component

 hideModal() {
    this.modal.hide();
    let self = this;

     setTimeout(function () { 
          self._router.navigateByUrl('/anotherRoute');
     }, 500);
  }

it seems that it takes some time, until the DOM has been updated or cleared. I dont know

@valorkin what is the fix to this problem? I don’t mind sending a pull request as the workaround is very bad.

Thanks!