Блог

Я хочу интегрировать только NbChat в свой проект. Сначала я просто попытался нормально интегрировать его во весь мой проект, но я получил следующую ошибку, как только я пытаюсь использовать компоненты с логикой typescript (в данном случае при входе в систему), когда NbThemeModule.forRoot({ name: 'corporate' }) указано как импорт в app.module и когда app.component.html завернуто в 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.....
  

Поскольку это нарушает все в приложении, я подумал о размещении всего чата в компоненте, экспортируемом вспомогательным модулем, который экспортирует его и импортирует

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

Наоборот, я импортирую самописный модуль ChatModule затем в app.module.ts .

Поскольку такая же ошибка возникает у других пользователей, когда компоненты Nebular Chat не обернуты в nb-layout, здесь вы можете видеть, что компонент чата обернут следующим образом.:

 <nb-layout>
   <nb-layout-column>
    <nb-chat title="Drag amp; 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>
   
  

По какой-то причине я все еще получаю ту же ошибку.
Помощь приветствуется.

Обновление1:

При отладке с помощью Chrome я получил более конкретные коды ошибок:

 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)
  

Во время дальнейшего тестирования кажется, что только импорт NbTheme в любой подмодуль вызывает конфликт со всеми наложениями (MatDialog, MatMenu, MatSnackbar, MatSideNav) Angular Material.

У меня была такая же ошибка при использовании NbThemeModule с MatMenuModule, и я решил ее с помощью передачи

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

в поставщиков компонента чата вместо того, чтобы использовать его во всем проекте. Таким образом, он работал только на странице, где использовался компонент.

Также я поставил

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

в ngOnInit в app.component, чтобы отключить глобальные небулярные стили и использовать этот класс только там, где я использую чат.

@Marc

Спасибо @0vC4

Я создал решение :

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

1. добавьте эту строку в импорт 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. Убедитесь, что следующий код является частью 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. в app.component.ts добавьте этот фрагмент кода в ngOnInit()

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

• Это удалит тему nebular из всего приложения.

6. в компоненте, который вы хотите применить тему, добавьте это в ngOnInit()

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

• Это добавит тему nebular в текущий компонент.