NbOverlayContainerAdapter and Lazy Loading #943

fahimalizain · 2018-10-25T17:20:50Z

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 :)

The text was updated successfully, but these errors were encountered:

ussamoo · 2018-11-04T13:49:06Z

Same issue here.

Tibing · 2018-11-08T08:13:30Z

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.

Vbboi24 · 2018-11-27T22:39:09Z

Hello @Tibing , I am using ngx-admin and I have app.component as just while the pages component inherits the layouts and gets me the overall page view. Add your solution to the appendChild issue makes it more compact and gets me a boxed layout. Can you please help me on this ?
To be precise, i have two layout components in my augury.
One : Because i have wrapped of app.component.html within
Two : Because i have my main content wrapped inside a already. (With all the header menu and sidebar menu, which cannot be compromised)

Tibing · 2018-11-28T04:08:00Z

Hi @Vbboi24, could you please create new issue for your question, also as provide reproducible stackblitz?

Vbboi24 · 2018-11-28T05:46:20Z

Yes Sure, I have already created a issue with ngx-admin repo
akveo/ngx-admin#1933 (comment)
Should i be creating a duplicate ? If i should, yeah. I'm asking only because i dont want to create duplicate issues to this beautiful Repo <3

Mayocampo · 2019-04-19T19:28:55Z

Same issue happening when add nb-select inside Feature module. Not working even with nb-layout wrapping all app. Any help?

eeskildsen · 2019-11-25T23:39:02Z

@Tibing Wrapping the app component's router outlet in nb-layout breaks ngx-admin. The pages component's router outlet is already wrapped in nb-layout, so wrapping the app component messes up the layout.

Is there an alternative for ngx-admin?

eeskildsen · 2019-11-26T20:21:42Z

So I tried:

Removing ngx-sample-layout from pages.component.ts's template
Wrapping router-outlet in app.component.ts's template

But I still get:

ERROR TypeError: "this.container is undefined"

(That's the Firefox equivalent of the Chrome error in the original post.)

Modified app.component.ts:

@Component({
selector: 'ngx-app',
template: `
<nb-layout>
    <nb-layout-column>
        <router-outlet></router-outlet>
    </nb-layout-column>
</nb-layout>`,
})

eeskildsen · 2019-11-26T22:10:28Z

Workaround: Eager load the module. (I guess that's obvious given the title, but I tinkered for a long time before getting there!)

Now NbDialogService works, but there's another issue: The dialog pushes all content to the top of the screen on pages with a scrollbar when you've scrolled down. But that's another can of worms....I'm guessing it's specific to ngx-admin's layout.

AlaaEl-DinAhmed · 2020-01-20T08:13:25Z

@Mayocampo hello bro, did you find a solution for this bug?

snakone · 2020-03-01T10:27:16Z

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 · 2020-03-13T06:38:02Z

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,
    ],
})

Omar-Sherif-Sayed · 2020-03-21T19:45:01Z

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.

Worked with me Thanks a lot

digitalhurricane-io · 2020-12-30T10:34:49Z

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.

shekharramola · 2021-03-25T17:02:20Z

this issue still exist with the lazy loading module.
P.S I am already using <nb-layout> <nb-layout-column> <router-outlet> </router-outlet> </nb-layout-column> </nb-layout> in app.component

snakone · 2021-03-25T17:07:18Z

this issue still exist with the lazy loading module.
P.S I am already using <nb-layout> <nb-layout-column> <router-outlet> </router-outlet> </nb-layout-column> </nb-layout> in app.component

you need to do the same on the child aswell as i mentioned

shekharramola · 2021-03-25T17:55:27Z

@snakone thanks man, I was struggling with this for the last 4-5 hours

ramprudvi · 2022-02-13T09:08:37Z

Hi Team,
I am having similar issue for our website we are having two layouts based on user log in so it is not possible to include layout on router outlet so create layouts and implement router outlet for each login based .but when trying to implement dialog service is not working in this.

Kindly suggest proper solution this could be a cause of a lot of users.

mdora7 · 2022-12-10T14:05:46Z

Thumbs up,
I have multiple router-outlet so the other definition is at child component's inside.
You say what I need to do is wrap the entire outlet, but I don't want to do that.

app.component.html
<router-outlet></router-outlet>

layout.component.html

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

Unfortunately, Dialog service not working because nebular says "Layout not found"

wadinj · 2022-12-18T07:45:05Z

Same issue - happen with upgrade from nebular v7 to v10. I also have multiple router-outlet.

Any fixes/workaround found ?

fahimalizain mentioned this issue Oct 26, 2018

Refactor overlays after @angular/cdk@7.0.0 relase #848

Closed

Tibing added bug P1: urgent labels Oct 26, 2018

fahimalizain mentioned this issue Oct 27, 2018

Is it possible to open a dialog from a service? #879

Closed

2 tasks

Tibing closed this as completed Nov 8, 2018

AlaaEl-DinAhmed mentioned this issue Jan 20, 2020

Same issue happening when add nb-select inside Feature module. Not working even with nb-layout wrapping all app. Any help? #2180

Open

tsa96 mentioned this issue Jun 10, 2023

Remove Angular frontpage content entirely momentum-mod/website#739

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NbOverlayContainerAdapter and Lazy Loading #943

NbOverlayContainerAdapter and Lazy Loading #943

fahimalizain commented Oct 25, 2018 •

edited

ussamoo commented Nov 4, 2018

Tibing commented Nov 8, 2018

Vbboi24 commented Nov 27, 2018

Tibing commented Nov 28, 2018

Vbboi24 commented Nov 28, 2018

Mayocampo commented Apr 19, 2019

eeskildsen commented Nov 25, 2019

eeskildsen commented Nov 26, 2019 •

edited

eeskildsen commented Nov 26, 2019 •

edited

AlaaEl-DinAhmed commented Jan 20, 2020

snakone commented Mar 1, 2020 •

edited

kainysheva commented Mar 13, 2020 •

edited

Omar-Sherif-Sayed commented Mar 21, 2020 •

edited

digitalhurricane-io commented Dec 30, 2020 •

edited

shekharramola commented Mar 25, 2021 •

edited

snakone commented Mar 25, 2021

shekharramola commented Mar 25, 2021

ramprudvi commented Feb 13, 2022

mdora7 commented Dec 10, 2022 •

edited

wadinj commented Dec 18, 2022 •

edited

NbOverlayContainerAdapter and Lazy Loading #943

NbOverlayContainerAdapter and Lazy Loading #943

Comments

fahimalizain commented Oct 25, 2018 • edited

Issue type

Issue description

Other information:

ussamoo commented Nov 4, 2018

Tibing commented Nov 8, 2018

Vbboi24 commented Nov 27, 2018

Tibing commented Nov 28, 2018

Vbboi24 commented Nov 28, 2018

Mayocampo commented Apr 19, 2019

eeskildsen commented Nov 25, 2019

eeskildsen commented Nov 26, 2019 • edited

eeskildsen commented Nov 26, 2019 • edited

AlaaEl-DinAhmed commented Jan 20, 2020

snakone commented Mar 1, 2020 • edited

kainysheva commented Mar 13, 2020 • edited

Omar-Sherif-Sayed commented Mar 21, 2020 • edited

digitalhurricane-io commented Dec 30, 2020 • edited

shekharramola commented Mar 25, 2021 • edited

snakone commented Mar 25, 2021

shekharramola commented Mar 25, 2021

ramprudvi commented Feb 13, 2022

mdora7 commented Dec 10, 2022 • edited

wadinj commented Dec 18, 2022 • edited

fahimalizain commented Oct 25, 2018 •

edited

eeskildsen commented Nov 26, 2019 •

edited

eeskildsen commented Nov 26, 2019 •

edited

snakone commented Mar 1, 2020 •

edited

kainysheva commented Mar 13, 2020 •

edited

Omar-Sherif-Sayed commented Mar 21, 2020 •

edited

digitalhurricane-io commented Dec 30, 2020 •

edited

shekharramola commented Mar 25, 2021 •

edited

mdora7 commented Dec 10, 2022 •

edited

wadinj commented Dec 18, 2022 •

edited