nebular: Context menu does not render after router navigation

Issue type

I’m submitting a … (check one with “x”)

  • bug report
  • feature request

Issue description

Current behavior: Following an OAuth2 flow similar to the samples, the user context menu in the header component does not drop-down upon click and yields the following stack trace.

main.a72571efe1e9cccd811a.js:69949 ERROR TypeError: Cannot read property ‘appendChild’ of null at NbOverlayContainerAdapter.push…/node_modules/@nebular/theme/components/cdk/adapter/overlay-container-adapter.js.NbOverlayContainerAdapter._createContainer (main.a72571efe1e9cccd811a.js:105528) at NbOverlayContainerAdapter.push…/node_modules/@angular/cdk/esm5/overlay.es5.js.OverlayContainer.getContainerElement (main.a72571efe1e9cccd811a.js:11222) at NbOverlay.push…/node_modules/@nebular/theme/components/cdk/overlay/mapping.js.NbOverlay.createHostElement (main.a72571efe1e9cccd811a.js:106080) at NbOverlay.push…/node_modules/@nebular/theme/components/cdk/overlay/mapping.js.NbOverlay.create (main.a72571efe1e9cccd811a.js:106055) at NbOverlayService.push…/node_modules/@nebular/theme/components/cdk/overlay/overlay.js.NbOverlayService.create (main.a72571efe1e9cccd811a.js:106832) at NbContextMenuDirective.push…/node_modules/@nebular/theme/components/context-menu/context-menu.directive.js.NbContextMenuDirective.createOverlay (main.a72571efe1e9cccd811a.js:108818) at NbContextMenuDirective.push…/node_modules/@nebular/theme/components/context-menu/context-menu.directive.js.NbContextMenuDirective.show (main.a72571efe1e9cccd811a.js:108798) at SafeSubscriber._next (main.a72571efe1e9cccd811a.js:108855) at SafeSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (main.a72571efe1e9cccd811a.js:137557) at SafeSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (main.a72571efe1e9cccd811a.js:137495)

Expected behavior: The user context menu will show upon click after router navigation.

Steps to reproduce: The callback code that’s triggering the issue is in the akveo/nebular repo. https://github.com/akveo/nebular/blob/7e68c20a92dbe8f86ff728f0df6d4e771a0b7408/src/playground/with-layout/oauth2/oauth2-callback.component.ts

I even tried a variation of the existing logic by running it within OnInit and OnDestroy with the appropriate subscription disposable. It yields the same results. The only thing that makes the user context menu to start rendering again is a hard-refresh of the browser.

Related code:

Other information:

npm, node, OS, Browser

Node, npm: `node --version` (v11.4.0) and `npm --version` (6.4.1)
OS: macOS Mojave
Browser: Chrome

Angular, Nebular

    "@nebular/auth": "3.1.0",
    "@nebular/bootstrap": "3.1.0",
    "@nebular/security": "3.1.0",
    "@nebular/theme": "3.1.0",

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 28

Commits related to this issue

Most upvoted comments

This issue effectively impedes the usage of the otherwise excellent ContextMenu and Dialog components and it should not be postponed any further

I also have the same problem with nebular toastr. Its not working in my lazy loaded feature module.

@lepidotteri I used Nebular Auth and had to write a custom AuthComponent that doesn’t use <nb-layout> itself, by default it does:

https://github.com/akveo/nebular/blob/1e1a293d189cc63f15a53c9e69682ee754fbc149/src/framework/auth/components/auth.component.ts#L16-L33

From my understanding the menu only works correctly if the <nb-layout> stays consistent throughout navigation.

I have the same problem with 4.6.0 version of nebular.

<nb-action *ngIf="isLoggedIn">
    <nb-user [name]="user?.name" [picture]="'https://www.gravatar.com/avatar/' + user?.email_hash"
      [nbContextMenu]="accountMenuActions" nbContextMenuTag="account-menu" nbContextMenuTrigger="hover">
    </nb-user>
</nb-action>

If i logout and login again i have the same error.

ERROR TypeError: Cannot read property 'appendChild' of null
    at NbOverlayContainerAdapter._createContainer (index.js:1043)
    at NbOverlayContainerAdapter.getContainerElement (overlay.js:768)
    at NbOverlay._createHostElement (overlay.js:3203)
    at NbOverlay.create (overlay.js:3162)
    at NbOverlayService.create (index.js:1637)
    at NbDynamicOverlay.createOverlay (index.js:11473)
    at NbDynamicOverlay.show (index.js:11436)
    at SafeSubscriber._next (index.js:11672)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)

It can aslo appear after navigation on specific routes, always the same routes.

Same issue for me with nebular 3.5.0 : just after login I have the same error message when I try to open a dialog. No error if I was already logged when I run the application.

I beleave that is something related to NbOverlayContainerAdapter._containerElement member (is showing null in vscode debugger). So, when it calls getContainerElement().appendChild throws the error!