Nebular Toastr > Cannot read property 'appendChild' of null

Question

I want to show a toast with the Nebular toastrService after navigating to a specific component. I am using a BehaviourSubject to check if the toast should be shown.

this.messageService.currentMessage.subscribe(msg => {
    if (msg.showToast){showToast()}
}

The code works in other components but for this component nebular throws the message "Cannot read property 'appendChild' of null" while creating the cdk-overlay-container.

Thanks in advance for your help!

Error Message nebular error

Answer 1

Wrap the router outlet in the app.component.html with nb-layout tags like below

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

Answer 2

It's a shame that this workaround is necessary, I recently faced the same issue in my app. Even though the whole app is wrapped in the layout/column components it still crashed with the same error.

The solution emerged eventually when I wrapped the same layout/column components around multiple of the "page" components that were part of the lazy loaded module causing the issue.

So if you keep experiencing this issue try wrapping the top-level problematic components in layout/column.

Answer 3

I only wanted to use Nebular's chat UI component, but it messed up my angular material and caused errors as you posted above

I didn't want to wrap <nb-layout> around my app.component.html just for the component.

My workaround and code

• Remove all nebular related imports in app.module.ts. (don't need providers or imports) I realized I only needed to import it in the child module

#child.module.ts 

@NgModule({
imports:[ NbThemeModule, NbLayoutModule, NbChatModule],
declarations: [ChatComponent]
})

#chat.component.html

<nb-layout>
<nb-layout-column>
<nb-chat>
.....
</nb-chat>
</nb-layout-column>
</nb-layout>

#chat.component.ts

@Component({
selector: ...
templateUrl: ...
styleUrls: [...],
providers: [NbThemeModule.forRoot().providers]
})

With this solution, first of all you won't get errors. The problem is, whenever chat.component.ts is created, NbThemeModule.forRoot().providers will make Nebular's default theme css be applied on the whole app. (Something in the library makes it work that way)

In my case, the only part where nb-default-theme was affecting my UI was on a .nb-theme-default h2 . So in style.scss, I did .nb-theme-default h2{ font: the original css !important} to overwrite that. Can also use this solution to try to erase the css on route movements. https://github.com/akveo/nebular/issues/1663#issuecomment-1184924290