ERROR TypeError: "this.container is undefined" for NbDialog

akveo / nebular

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode

https://akveo.github.io/nebular

MIT License

8.06k stars 1.51k forks source link

ERROR TypeError: "this.container is undefined" for NbDialog #2060

Open beyondszine opened 4 years ago

beyondszine commented 4 years ago

Issue type

I'm submitting a

[ ] bug report
[ ] feature request
Unknown cause, Not qualified enough to call this a bug, & certainly not a feature request. Just that I am not able to get NbDialog working because of this not much descriptive error & my incapability to understand the complicated stack trace.

Issue description NbDialog service is not able to open a dialog box by giving an error " ERROR TypeError: "this.container is undefined" for NbDialog"

Steps to reproduce: https://angular-acregw.stackblitz.io

Kindly help by giving it a look.

caiomcoliveira commented 4 years ago

Couldn't open the stackblitz

Did you put the component you are trying to open on EntryComponents?

maihannijat commented 4 years ago

I think it's because you are not using Nebular Layout. Put your content inside <nb-layout></nb-layout> in the app.component.html

And consider the @caiomcoliveira, otherwise it would throw:

error: No component factory found for ArtefactdetailComponent. Did you add it to @NgModule.entryComponents?

beyondszine commented 4 years ago

Couldn't open the stackblitz

Did you put the component you are trying to open on EntryComponents?

@caiomcoliveira yes indeed. I am not sure why stackblitz couldn't open. Can you please retry via https://stackblitz.com/edit/angular-acregw Yes, it is in the entryComponents list.

beyondszine commented 4 years ago

I think it's because you are not using Nebular Layout. Put your content inside <nb-layout></nb-layout> in the app.component.html

And consider the @caiomcoliveira, otherwise it would throw:

error: No component factory found for ArtefactdetailComponent. Did you add it to @NgModule.entryComponents?

Indeed, the html code inside app.component.html is wrapped under but yet the error is same.

maihannijat commented 4 years ago

@beyondszine The following is the correct way of wrapping in nb-layout: template : '<nb-layout><nb-layout-column><button nbButton (click)="open()">Open Dialog</button></nb-layout-column></nb-layout>'

beyondszine commented 4 years ago

Thanks @maihannijat This way, it works for sure. I have been appalled by the browsers error display on console. Firefox says: todelete

while Chrome showed an error of todelete_chrome

Just adding \<nb-layout> tag without \<nb-layout-column> makes all the html hide, no error message or anything on the console. Just nothing appears on screen for both the browsers.

Regarding the documentation & guides I have been following:

For all of the files( Loader Component, Module, & the component to be loaded), I wonder how things are working here. Am I still overlooking something crucial, or the docs & guides need update?

yggg commented 4 years ago

@beyondszine Can't open stackblitz. Make sure it's not private.

MrTaiji commented 4 years ago

I Actually got the same Error (with both kinds of Error Codes in Firefox and Chrome), which caused the whole Application to break. After checking the error Code in Chrome and more Debugging I found out that adding the NbTheme Module Import in any submodule, conflicts with all overlays from Angular Material (matDialog, matSnackbar, matMenu)

See my stackoverflow post here: https://stackoverflow.com/questions/63849598/angular-nebular-chat-only-for-one-module-and-component