Cannot read property 'appendChild' of undefined

[vigneshbarani24]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request
• question about the decisions made in the repository

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:

I am using ngx-admin, I am calling an overlay container. Clicking that results in an error. I have looked up to nebular and the issue provided is to wrap app.component.html within . But Remember ngx-admin has its app.component template as just . The Pages module is wrapped within a layout template . The temporary solution provided shrinks my view content and it is all into a smaller window. Because i presume we have a layout inside a layout again. (ngx-sample-layout comes with its own tag with all the header and sidebar content.

Related code:
https://stackblitz.com/edit/nebular-overlay-container-adapter-bug?file=src%2Fapp%2Fapp.component.html

insert short code snippets here

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

[fbatiga]

Hello,

Any news on this issue ?

[snakone]

I had the same issue with a nested child route, had a working <nb-select> on the main <nb-layout> and i wanted to have another <nb-select> on a sub child route, app router > child > child.

I SOLVED it by wrapping the third <router-outlet> like this

<nb-layout>
 <nb-layout-column>
     <router-outlet></router-outlet>
  </nb-layout-column>
</nb-layout>

Sub child Module

@NgModule({
  imports: [
    ......
    NbSelectModule
  ]
})

@nebular 4.x.x
@angular 8.x.x

[kainysheva]

Solved this problem by removing the providers in @NgModule

@NgModule({
    imports: [...MODULES, ...NB_MODULES, ...FR_MODULES],
    exports: [...MODULES, ...NB_MODULES, ...PIPES, ...COMPONENTS, ...ENTRY_COMPONENTS, ...DIRECTIVES],
    declarations: [...COMPONENTS, ...ENTRY_COMPONENTS, ...PIPES, ...DIRECTIVES],
    entryComponents: [...ENTRY_COMPONENTS],
    providers: [
        ...NbThemeModule.forRoot(
            {
                name: 'default',
            },
            [DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
        ).providers,
    ],
})

[YashAggarwal21]

@kainysheva can you exaplain how you resolved this?