Mat Dialog未作为弹窗打开而是显示在页面左侧问题排查

你的配置存在两处核心错误，直接导致MatDialog样式与定位逻辑未正常加载：

• 错误1：AppModule中仅导入了MatDialogModule类，未将其添加到imports数组中，导致MatDialog相关的服务、样式、DOM渲染逻辑未生效
• 错误2：大概率未引入Angular Material全局主题，MatDialog的弹出层定位、遮罩样式都依赖主题内置的CSS规则

修复步骤 #

1. 修改AppModule配置，将MatDialogModule加入imports数组，冗余的entryComponents配置（Angular9+已废弃）可按需删除，修改后的完整配置如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { BodyComponent } from './body/body.component';
import { DialogComponent } from './shared/dialog/dialog.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    BodyComponent,
    DialogComponent
  ],
  imports: [
    BrowserModule, 
    AppRoutingModule, 
    BrowserAnimationsModule,
    MatDialogModule // 新增此处
  ],
  // 非库项目不需要导出MatDialogModule，可删除exports配置
  // entryComponents为Angular9前的配置，当前版本可直接删除
  providers: [
    { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: true } }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 检查项目angular.json配置，确认build.options.styles数组中已引入Angular Material预构建主题，示例配置如下：

{
  "build": {
    "options": {
      "styles": [
        "src/styles.css",
        "@angular/material/prebuilt-themes/indigo-pink.css" // 新增此处，可根据需求替换为其他主题
      ]
    }
  }
}

3. 重启开发服务即可看到弹窗正常居中弹出。

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