NbPopoverDirective lacks a null check for its NbOverlayRef in ngOnDestroy()

Issue type

I’m submitting a …

• bug report
• feature request

Issue description

Current behavior:

In our app, we have a stepper with some steps using popovers to give “extra” data. The popover works fine, but when we try to navigate away from the component, the page errors out on destroying the component, in particular the NbPopoverDirective used in the steps. This only started happening after we upgraded to v3.0.1.

Expected behavior:

Being able to navigate away from the page without issue. Other pages seem to work fine, it is only on the page with a stepper component.

Related code:

    <nb-stepper>
         [....]
        <nb-step>
             [....]
          <i class="ion ion-help-circled"
                       [nbPopover]="'This is some string that we use in our program!'"
                       [nbPopoverMode]="'hint'"></i>
         </nb-step>
     </nb-stepper>

This is just an example of the code we use. Again, the popover works fine, it’s just when we try navigating away from the page, we get this error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'dispose' of undefined
TypeError: Cannot read property 'dispose' of undefined
    at NbPopoverDirective.push../node_modules/@nebular/theme/components/popover/popover.directive.js.NbPopoverDirective.ngOnDestroy (popover.directive.js:129)
    at callProviderLifecycles (core.js:20988)
    at callElementProvidersLifecycles (core.js:20956)
    at callLifecycleHooksChildrenFirst (core.js:20946)
    at destroyView (core.js:22008)
    at callViewAction (core.js:22134)
    at execComponentViewsAction (core.js:22056)
    at destroyView (core.js:22007)
    at callWithDebugContext (core.js:22767)
    at Object.debugDestroyView [as destroyView] (core.js:22451)

This line points to here, and git history shows it was added without even checking this.ref. This is odd, considering the rest of the file seems to do a null check for the ref. But, it seems like it’ll be an easy, almost-one-line fix:

- this.ref.dispose()
+ if (this.ref) {
+   this.ref.dispose();
+ }

Now I’m not so sure as to why the ref would be null in this instance, unless createOverlay() is never called for popovers for some reason, or if when navigating away it destroys the ref first… Could be another issue to look into. Either way, a null check would be a great solution for now.

Other information:

npm, node, OS, Browser

Node, npm: 10.10.0, 6.4.1
OS: Windows 10
Browser: Both Firefox and Chrome

Angular, Nebular

Angular: 7.1.3
Nebular: 3.0.1

[nnixaa]

Guys, Happy New Year!🎄 And btw, the fix was released with 3.1.0.

[garyng]

Hi guys, having the same issue after upgrading to 3.0.1

Uncaught (in promise): TypeError: Cannot read property 'dispose' of undefined
TypeError: Cannot read property 'dispose' of undefined
    at NbPopoverDirective.push../node_modules/@nebular/theme/components/popover/popover.directive.js.NbPopoverDirective.ngOnDestroy

Any ideas on when this will make its way into an update?

I’m too waiting for the release - but for now I just npm link-ed the latest nebular source.

(Instructions here: https://github.com/akveo/nebular/blob/master/DEV_DOCS.md under the title ngx-admin development on the latest Nebular sources)