Problem with Nebular and Angular Material Dialogs

Question

When i installed the nebular theme, I got an error about the angular material modals that i used. I use nebular only for the authentication page. The error is ERROR TypeError: Cannot read properties of undefined (reading 'appendChild') What can i do to solve this?

Answer 1

Nebular automatically inject a new implementation for Overlay container, so when you use any popup that use angular cdk overlay, it will fail unless the Nebular Overlay Container can find its element, my guess is that element is nebular layout component, so basically you can't use any dialog outside nebular layout, one solution you can have is implementing your own Overlay Container and provide it within the modules that have mat dialog usage. something like this

@Injectable()
export class MyOverlayContainer extends OverlayContainer implements OnDestroy {
  constructor(@Inject(DOCUMENT) document: Document, _platform: Platform) {
    super(document, _platform);
  }

  protected _createContainer(): void {
    super._createContainer();
    if (!this._containerElement) {
      return;
    }
    const parent = document.body;
    parent.appendChild(this._containerElement);
  }

  ngOnDestroy() {
    super.ngOnDestroy();
    this._containerElement = null;
  }
}

and in your module

 import { OverlayContainer } from '@angular/cdk/overlay';

 @NgModule({
 providers: [{ provide: OverlayContainer, useClass: MyOverlayContainer }]  
 })