typescript - Angular Nebular Chatt endast för en modul och komponent

Jag vill bara integrera NbChat i mitt projekt. Först försökte jag bara integrera det normalt i hela projektet, men jag fick följande fel så snart jag försöker använda komponenter med TypeScript-logik (i det här fallet inloggning), när NbThemeModule.forRoot({ name: 'corporate' }) anges som en import i app.module och när app.component.html är insvept i 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.....

Eftersom detta bryter allt i applikationen, tänkte jag på att placera hela chatten i en komponent som exporteras av en undermodul som exporterar den och importerar

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

Vice Versa importerar jag den självskrivna ChatModule sedan i app.module.ts.

Eftersom samma fel händer för andra personer när Nebular Chat Components inte är inneslutna i nb-layout, kan du här se att Chat Component är innesluten på följande sätt.:

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

Av någon anledning får jag fortfarande samma fel. Hjälp uppskattas.

Uppdatering1:

När jag felsökte med Chrome fick jag mer specifika felkoder:

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)

Vid mer testning verkar det som att endast att importera NbTheme i någon delmodul orsakar en konflikt med alla overlays (MatDialog, MatMenu, MatSnackbar, MatSideNav) av Angular Material.

Svar #1

Jag fick samma fel när jag använde NbThemeModule med MatMenuModule, och löste det genom att skicka

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

till leverantörer av chattkomponenten istället för att använda den i hela projektet. Så det fungerade bara på sidan där komponenten användes.

Också jag satte

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

till ngOnInit i app.component för att inaktivera globala nebular-stilar och använda denna klass endast där jag använder chatten.

Svar #2

@Marc

Tack till @0vC4

Jag har skapat en lösning:

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

1. lägg till denna rad i importerna av `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. Se till att följande kod är en del av `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. i `app.component.ts` lägg till denna kodbit i `ngOnInit()`

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

Detta kommer att ta bort nebular-temat från hela appen.

6. i komponenten där du vill tillämpa temat, lägg till detta i `ngOnInit()`

  ngOnInit(): void {
    document.body.classList.add('nb-theme-default');
  }

Detta kommer att lägga till nebular-temat på den aktuella komponenten.

typescript - Angular Nebular Chatt endast för en modul och komponent

Svar #1

Svar #2

1. lägg till denna rad i importerna av app.module.ts

2.app.component.html ;

3. Se till att följande kod är en del av styles.scss;

4. themes.scss ;