valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

Error(s) on opening and closing a modal called by the modal service #2546

Closed FloriaanTickles closed 7 years ago

FloriaanTickles commented 7 years ago

When opening a modal in the following manner:

<button (click)="openModal(goatmodal)" class="control-area__btn--small">
</button>

<ng-template #goatmodal>
    <div class="modal-header">
        <h2 class="modal-title pull-left"></h2>
    </div>
    <div class="modal-body">
        <div *ngFor="let goat of goats">
            <button class="modal__btn--small" (click)="tickleGoat(goat); hideModal();">
                 <span class="control-area__btn--small__inner">
                    <i class="fa fa-user"></i><h4>Behhhh</h4>
                </span>
            </button>
        </div>
    </div>
</ng-template>

i get the following error:

core.es5.js:1020 ERROR TypeError: Cannot read property 'nativeElement' of null at component-loader.class.js:181 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191) at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498) at ZoneTask.invoke (zone.js:487) at timer (zone.js:1829) defaultErrorLogger @ core.es5.js:1020 webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080 next @ core.es5.js:4503 schedulerFn @ core.es5.js:3635 webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238 webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185 webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125 webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89 webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55 webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621 (anonymous) @ core.es5.js:3912 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141 webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844 onHandleError @ core.es5.js:3912 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:194 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498 ZoneTask.invoke @ zone.js:487 timer @ zone.js:1829 setTimeout (async) scheduleTask @ zone.js:1839 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410 onScheduleTask @ zone.js:300 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:258 (anonymous) @ zone.js:1865 proto.(anonymous function) @ zone.js:1227 webpackJsonp.../../../../ngx-bootstrap/component-loader/component-loader.class.js.ComponentLoader._registerOutsideClick @ component-loader.class.js:179 webpackJsonp.../../../../ngx-bootstrap/component-loader/component-loader.class.js.ComponentLoader.show @ component-loader.class.js:98 webpackJsonp.../../../../ngx-bootstrap/modal/bs-modal.service.js.BsModalService._showBackdrop @ bs-modal.service.js:62 webpackJsonp.../../../../ngx-bootstrap/modal/bs-modal.service.js.BsModalService.show @ bs-modal.service.js:37 webpackJsonp.../../../../../src/app/auth/auth.component.ts.AuthComponent.openModal @ auth.component.ts:41 (anonymous) @ AuthComponent.html:1 handleEvent @ core.es5.js:12004 callWithDebugContext @ core.es5.js:13465 debugHandleEvent @ core.es5.js:13053 dispatchEvent @ core.es5.js:8602 (anonymous) @ core.es5.js:9213 (anonymous) @ platform-browser.es5.js:2651 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424 onInvokeTask @ core.es5.js:3881 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498 invokeTask @ zone.js:1370 globalZoneAwareCallback @ zone.js:1388 core.es5.js:1020 ERROR TypeError: Cannot read property 'nativeElement' of null at component-loader.class.js:181 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191) at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498) at ZoneTask.invoke (zone.js:487) at timer (zone.js:1829)

akreidercap commented 7 years ago

I have the same issue (2.0.0-beta.4, 2.0.0-beta.3 works fine)

valorkin commented 7 years ago

This issue is fixed in v1.9.1 It's in _registerOutsideClick @next version will be updated tomorrow