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

[jppellerin]

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?

[valorkin]

very interesting, it means that there no document can be injected at that time
but how can it be?
can you please provide something so I can reproduce and fix?
repo or gist
Thanks in advance :)

[jppellerin]

@valorkin I'm as confused as you are it seems :).

This is all in a huge messed-up app... I will try (hopefully tomorrow) to create a contained instance where I can reproduce this.

[valorkin]

yeap, I am confused :)
Thanks in advance :)

[dennisx5]

@valorkin Do you still need a reproduction?. Have the same error. I could setup a plnkr if still necessary.

[valorkin]

@dennisx5 I will appreciate a plunkr
and reproduce steps

Thanks in advance!

[crebuh]

@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

[dennisx5]

@valorkin Here is the example https://github.com/GreenToast/Angular2Starter/tree/bug/ng2bootstrap-modal.

"npm install" for setup and "npm start" to start it.

Look in the dashboard.component in app/dashboard. There is a delete-button and an according dummy-delete-action. After which I want to leave the page. The error is thrown during the navigate.

Like @crebuh assumes, I think it's an asynchronous Action to close the dialog, which is executed too late or after the navigate is done.

[rope-hmg]

I am also having this problem.

In my modal template I have these two buttons. The first has no problem, but the second tries to navigate after closing the modal.

<button class="btn btn-default" (click)="modal.hide()">Cancel</button>
<button class="btn btn-primary" (click)="Proceed()">Proceed</button>

I'm accessing the modal like this:

@ViewChild( "modal" ) private _modal: any;

Then I'm using it like this:

this._modal.hide();
this._router.navigate( [ "/hub" ] );

I'm using @crebuh's workaround for now and that seems to be working.

[justme1]

Same problem here.

[justme1]

When will this be fixed?

[galsch]

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

Thanks!

[justme1]

Same problem here - any indications when this will be resolved? Issue is opened since Jun 3, and the workaround isn't scalable...

Please assist!

[valorkin]

Have to try couple of things, but it seems injecting document token, not always behave correctly:(

[justme1]

@valorkin great, thanks @valorkin - this issue is extremely problematic for us as all of our app is using the Modal intensively and we have a lot of production issues due to this bug.

[valorkin]

I am on it, I will get you updated
for faster updates join slack: https://www.hamsterpad.com/chat/ng2

[justme1]

@valorkin, great thanks!

[jigneshzala]

I am also having this problem.

while using

@ViewChild("autoShownModal", { static: false })
autoShownModal?: ModalDirective;

showModal(): void {

  this.isModalShown = true;

}

hideModal(): void {
this.autoShownModal?.hide();
}

onHidden(): void {
this.isModalShown = false;
}

0|front | TypeError: Cannot read property 'body' of undefined
0|front | at ModalDirective.resetScrollbar (/dist/server/main.js:1:4626347)

Thanks in advance......