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

auth: - proper routing for auth submodule - local NbAuthComponent to avoid oddities of multi NbLayout instances (error like in https://github.com/akveo/nebular/issues/1136) - — committed to pmstss/ngrx-quiz by pmstss 5 years ago

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

Ungolim on Jul 1, 2019

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

NileshDabi on Oct 8, 2019

@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.

niklasravnsborg on Nov 5, 2019

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.

leohubert on Jan 18, 2020

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.

sancaruso on May 28, 2019

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!

Gilmar-Gomes on Jun 8, 2019