NbOverlayContainerAdapter and Lazy Loading

Issue type

I’m submitting a bug report

Issue description

Current behavior: When a lazy loaded module is opened, a NbOverlayContainerAdapter gets constructed along with it which wont have its setContainer() called. This causes the nbDialog to fail in _createContainer()

Expected behavior: setContainer() should be called, or createContainer() should append to document body if container undefined

Steps to reproduce:

• Create a lazyloaded module and route to its component.
• Try to open a nbDialog with NbDialogService injected
• Check console

Related code: Please try to open the dialog from the lazy loaded module, sm and check stackblitz console.

https://stackblitz.com/edit/nebular-overlay-container-adapter-bug

Other information:

Console logs: ERROR TypeError: Cannot read property 'appendChild' of undefined at NbOverlayContainerAdapter._createContainer (theme.umd.js:1907) at NbOverlayContainerAdapter.OverlayContainer.getContainerElement (overlay-container.ts:40) at NbOverlay.createHostElement (theme.umd.js:1289) at NbOverlay.create (theme.umd.js:1246) at NbOverlayService.create (theme.umd.js:1859) at NbDialogService.createOverlay (theme.umd.js:12724) at NbDialogService.open (theme.umd.js:12714) at LcmpComponent.openDialog (VM4956 lcmp.component.ts:21) at Object.eval [as handleEvent] (LcmpComponent.html:1) at handleEvent (view.ts:138)

npm, node, OS, Browser

Node: v8.10  npm: v6.4.1
OS: Windows 10
Browser: All

Angular, Nebular

    "@angular/cdk": "^6.4.7",
    "@angular/common": "6.1.9",
    "@angular/compiler": "6.1.9",
    "@angular/core": "6.1.9",
    "@angular/forms": "6.1.9",
    "@angular/http": "6.1.9",
    "@angular/platform-browser": "6.1.9",
    "@angular/platform-browser-dynamic": "6.1.9",
    "@angular/router": "6.1.9",
    "@nebular/auth": "^2.0.0",
    "@nebular/theme": "^2.0.0",
    "@nebular/security": "^2.0.0",

What I have observed is that, only when NbLayout is constructed you call the setContainer() Also I dont get consistent behavior when i wrap lazy-component with NbLayout

Please look into this issue 😃

[Tibing]

Hi Guys! As it mentioned in the documentation, you have to wrap all the entire application in the nb-layout. I saw you’ve tried that, and you’re failed but you were very close 😄 To achieve the desired behavior you have to wrap all your app in the nb-layout it means you have to just wrap the app.component’s router-outlet in it. I did it in your stackblitz and all works fine.

[digitalhurricane-io]

And what if we can’t wrap the entire application in an <nb-layout> and <nb-layout-column>? This seems like an unreasonable requirement.

We shouldn’t have to wrap the entire app in a layout altering component to get overlays to work.

This breaks angular material dialogs, which is why I ended up here.

There’s lot’s of issues on this problem. No real solutions IMO.

Wrapping the entire app in layout altering components is not a solution.