安装Nebular主题后Angular Material Dialogs出现undefined报错如何解决

这个ERROR TypeError: Cannot read properties of undefined (reading 'appendChild')报错是因为Nebular默认会全局替换Angular CDK的overlay容器实现，和Angular Material依赖的原生CDK overlay容器产生冲突。你仅在认证页面使用Nebular，其余使用Material的业务模块没有适配Nebular的overlay容器规则，导致Material模态框初始化时找不到有效的挂载节点。

方案1：限定Nebular的作用范围（推荐） #

仅让Nebular的配置在认证模块生效，不污染全局配置：

• 将原来全局注册的Nebular模块从AppModule移动到独立的认证子模块中
• 给NbThemeModule.forRoot添加nbIsGlobal: false配置项，示例代码：

import { NgModule } from '@angular/core';
import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
import { AuthRoutingModule } from './auth-routing.module';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [LoginComponent],
  imports: [
    AuthRoutingModule,
    NbLayoutModule,
    // 新增第四个参数nbIsGlobal设为false，限定配置仅在当前模块生效
    NbThemeModule.forRoot({ name: 'default' }, undefined, undefined, { nbIsGlobal: false })
  ]
})
export class AuthModule { }

方案2：为Material单独指定overlay容器 #

如果需要保留Nebular的全局配置，可单独覆盖Material依赖的CDK overlay容器实现：

1. 新建自定义容器类

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

@Injectable()
export class CustomMaterialOverlayContainer extends OverlayContainer {
  protected override _createContainer(): void {
    const container = document.createElement('div');
    container.classList.add('cdk-overlay-container');
    // 直接挂载到body，避开Nebular的容器逻辑
    document.body.appendChild(container);
    this._containerElement = container;
  }
}

2. 在使用Material的模块中注册该容器

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { OverlayContainer } from '@angular/cdk/overlay';
import { CustomMaterialOverlayContainer } from './custom-overlay-container';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: OverlayContainer, useClass: CustomMaterialOverlayContainer }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

方案3：隔离Nebular样式引入 #

检查angular.json的styles配置，不要全局引入Nebular的全局样式：

• 删掉全局配置中的node_modules/@nebular/theme/styles/global/reset.scss等全局样式引入
• 仅在认证模块的组件样式中按需引入Nebular相关样式

内容的提问来源于stack exchange，提问作者George Stm