2

I want to integrate only the NbChat into my project. At first I just tried to integrate it normally in my whole project, but I got following error as soon as I try to use components with typescript logic (in this case logging in), when the NbThemeModule.forRoot({ name: 'corporate' }) is stated as an import in the app.module and when the app.component.html is wrapped in NbLayout:

ERROR Error: Uncaught (in promise): TypeError: this.container is undefined
_createContainer@http://localhost:4200/vendor.js:80244:9
getContainerElement@http://localhost:4200/vendor.js:178191:18
_createHostElement@http://localhost:4200/vendor.js:180093:32
create@http://localhost:4200/vendor.js:180060:27
_createOverlay@http://localhost:4200/vendor.js:112117:30
_attach@http://localhost:4200/vendor.js:112026:33
openFromComponent@http://localhost:4200/vendor.js:111963:21
open@http://localhost:4200/vendor.js:111991:21
login/<@http://localhost:4200/main.js:7096:68
__awaiter/<@http://localhost:4200/vendor.js:167019:71
ZoneAwarePromise@http://localhost:4200/polyfills.js:1317:33
__awaiter@http://localhost:4200/vendor.js:167015:12
login@http://localhost:4200/main.js:7084:75.....

Since this breaks everything in the Application, I though of placing the whole chat in a component exported by a sub module which exports it, and imports

NbThemeModule.forRoot({ name: 'corporate' }),
NbLayoutModule,
NbEvaIconsModule,
NbChatModule

Vice Versa I import the self written ChatModule then in the app.module.ts.

Since the same error happens for other people when Nebular Chat Components are not wrapt in nb-layout, so here you can see that the Chat Component is wrapped as follows.:

<nb-layout>
   <nb-layout-column>
    <nb-chat title="Drag & Drop chat" size="medium">
        <nb-chat-message *ngFor="let msg of messages"
                         [type]="msg.type"
                         [message]="msg.text"
                         [reply]="msg.reply"
                         [sender]="msg.user.name"
                         [date]="msg.date"
                         [files]="msg.files"
                         [avatar]="msg.user.avatar">
        </nb-chat-message>
        <nb-chat-form (send)="sendMessage($event)" [dropFiles]="true"></nb-chat-form>
      </nb-chat>
   </nb-layout-column>
</nb-layout>

For some reason I still get the same error. Help is appreciated.

Update1:

While debugging with Chrome I got more specific Error Codes:

core.js:4197 ERROR TypeError: Cannot read property 'appendChild' of undefined
at NbOverlayContainerAdapter._createContainer (index.js:2116)
at NbOverlayContainerAdapter.getContainerElement (overlay.js:735)
at Overlay._createHostElement (overlay.js:2637)
at Overlay.create (overlay.js:2604)
at MatDialog._createOverlay (dialog.js:673)
at MatDialog.open (dialog.js:632)
at ActivejobsComponent.openJobCreation (activejobs.component.ts:72)
at ActivejobsComponent_div_1_Template_button_click_5_listener (activejobs.component.html:9)
at executeListenerWithErrorHandling (core.js:14309)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:14344)

While more testing, it seems like that only Importing NbTheme in any submodule, causes a conflict with all overlays (MatDialog, MatMenu, MatSnackbar, MatSideNav) of Angular Material.

Marc
  • 43
  • 2
  • 6
  • did you resolve this by any chance? – Deniss M. Apr 17 '21 at 16:02
  • 1
    the only way I found out to resolve it was to wrap the whole app.component.html in and made it via css as impactless as possible. There where still conflicts with some MatSnackbars occasionally, at the affected positions, I replaced them with nbToasts. Since it is not a "real" solution, I put it here in the comments – Marc Apr 19 '21 at 15:24

2 Answers2

0

I had the same error when using NbThemeModule with MatMenuModule, and resolved it with passing

...NbThemeModule.forRoot().providers, NbThemeModule

into providers of chat component instead using it on whole the project. So it's worked only on the page where component used.

Also i put

this.router.events.subscribe((event) => {
    document.body.classList.remove('nb-theme-default');
});

into ngOnInit in the app.component to disable global nebular styles and use this class only where i use the chat.

0vC4
  • 1
0

@Marc

Thanks to @0vC4

I've created a solution :

https://github.com/akveo/nebular/issues/1663#issuecomment-1184924290

1. add this line in imports of app.module.ts

imports: [  
    NbThemeModule.forRoot({ name: 'default' }),
]

2.app.component.html ;

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

3. Make sure that the following code is part of styles.scss ;

@use 'themes' as *;
@use '@nebular/theme/styles/globals' as *;
@include nb-install() {
  @include nb-theme-global();
};

4. themes.scss ;

@forward '@nebular/theme/styles/theming';
@use '@nebular/theme/styles/theming' as *;
@use '@nebular/theme/styles/themes/default';

$nb-themes: nb-register-theme((
  // add your variables here like:
  // color-primary-100: #f2f6ff,
  // color-primary-200: #d9e4ff,
), default, default);

5. in app.component.ts add this piece of code in ngOnInit()

  ngOnInit(): void {
      this.router.events.subscribe((event) => {
          document.body.classList.remove('nb-theme-default');
      });
  }
  • This will remove the nebular theme from all the app.

6. in the component you want to apply the theme add this in ngOnInit()

  ngOnInit(): void {
    document.body.classList.add('nb-theme-default');
  }
  • This will add the nebular theme @ the current component.
Mansou4
  • 1
  • 1