Ngx-bootstrap: bsModal open failing - Angular 2.2.X upgrade

[arimus]

FYI, I didn't have angular versions locked to 2.1.X, but ^2.0.0 and ended up with 2.2.0 which just landed. Started seeing the errors below and I verified that locking everything to 2.1.X resolved the issue. Apparently you already knew there was a hack around an issue (https://github.com/angular/angular/issues/9293) in there which appears to not work any longer. Btw, it appears the fix for that issue has landed in 2.2.0.

    try {
        /* one more ugly hack, read issue above for details */
        var rootComponent = this.applicationRef._rootComponents[0];
        this.root = rootComponent._hostElement.vcRef;
        return this.root;
    }
    catch (e) {
        throw new Error("ApplicationRef instance not found");
    }

ERROR

core.umd.js:2840 Error: ApplicationRef instance not found
at ComponentsHelper.getRootViewContainerRef (components-helper.service.js:59)
at ComponentsHelper.appendNextToRoot (components-helper.service.js:94)
at ModalDirective.showBackdrop (modal.component.js:191)
at ModalDirective.show (modal.component.js:108)
at ProjectEditMediaModalComponent.showChildModal (project-edit-media-modal.component.js:130)
at ProjectComponent.showEditProjectMediaModal (project.component.js:106)
at View_ProjectComponent12.handleEvent_2 (component.ngfactory.js:2141)
at View_ProjectComponent12.eval (core.umd.js:9446)
at HTMLAnchorElement.eval (platform-browser.umd.js:1406)
at ZoneDelegate.invokeTask (zone.js?1479214884263:225)

[quiringk]

I just got everything working with Angular AOT and 2.2.0 as well and now this is the last error I am seeing. Sounds like @arimus is saying it is from Angular 2.2.0. The error happens for me when I try to open a modal from the template

(click)="lgModal.show()"

[fkondej]

Workaround that doesn't look nice, but works for me:

this.childModal.config.backdrop = false; // workaround 
this.childModal.show();

[SpeedoPasanen]

Same issue when an ng2-bootstrap Tooltip with [tooltipAppendToBody]="true" is shown. Upgraded ng to 2.2.0 from 2.1.0.

[valorkin]

it is known issue, working on it
to not wait for next version release
please use workaround described here: https://github.com/valor-software/ng2-bootstrap/issues/986#issue-177218652

closing as a duplicate

[themicon]

To restore the backdrop effect, following the workaround by @m4js7er

<div [config]="{backdrop: false}" (onShow)="showBackdrop()" (onHide)="hideBackdrop()">

showBackdrop() {
    let el = document.createElement('div');
    el.className = 'modal-backdrop fade in';
    document.body.appendChild(el);
}
hideBackdrop() {
    document.body.removeChild(document.querySelector('.modal-backdrop'));
}

[mrguodong]

I followed up instructions from official home page.
http://valor-software.com/ngx-bootstrap/index-bs4.html#/

1. add below line in app.module.ts
   import {ModalModule} from "ng2-bootstrap/modal";
2. add below line in @NgModule block in app.module.ts
   ModalModule.forRoot(),
3. add bootstrap.min.css in index.html
   

Tsutomu