Angular v15下MatDialog渲染异常问题求助

项目升级到Angular v15，按官方文档移除entryComponents并将所有组件转为standalone模式后，MatDialog无法正常打开。控制台仅抛出错误：Cannot read properties of undefined (reading 'errorState')，即使新建MatDialog组件也无法解决问题。

相关代码与配置 #

打开Dialog的按钮TS代码 #

openAddPhonenumberDialog() {
    const dialogRef = this.dialog.open(AddPhonenumberComponent, {
      minWidth: "300px",
      autoFocus: false,
    });
}

电话号码Dialog组件TS代码 #

@Component({
  selector: "app-add-phonenumber",
  templateUrl: "./add-phonenumber.component.html",
  styleUrls: ["./add-phonenumber.component.css"],
  standalone: true,
  imports: [
    MatDialogModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatOptionModule,
    NgIf,
    MatButtonModule,
  ],
})

电话号码Dialog组件HTML代码 #

<h2 mat-dialog-title>Add a new phonenumber</h2>
<form [formGroup]="addPhonenumberForm" (ngSubmit)="onAddNewPhonenumber()">
    <mat-dialog-content style="display:flex;flex-direction: column;">
        <mat-form-field>
            <mat-label>Phonenumber</mat-label>
            <input matInput formControlName="phonenumber" type="tel" required 
                (input)="formatInput()">
        </mat-form-field>
    </mat-dialog-content>
    <mat-dialog-actions>
        <button mat-button [mat-dialog-close] (click)="close()">Close</button>
        <button type="submit" mat-button [mat-dialog-close]="result" >Save</button>  
    </mat-dialog-actions>
</form>

package.json依赖配置 #

{
    "@angular-devkit/core": "^16.1.8",
    "@angular-devkit/schematics": "^16.1.8",
    "@angular/animations": "~15.2.9",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "~15.2.9",
    "@angular/compiler": "~15.2.9",
    "@angular/core": "~15.2.9",
    "@angular/forms": "~15.2.9",
    "@angular/material": "^15.2.9",
    "@angular/platform-browser": "^15.2.9",
    "@angular/platform-browser-dynamic": "~15.2.9",
    "@angular/router": "~15.2.9",
    "@types/gapi.client.drive": "^3.0.8",
    "angular-in-memory-web-api": "^0.9.0",
    "bootstrap": "^4.4.1",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.0",
    "moment": "^2.26.0",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.5",
    "tslib": "^2.0.0",
    "xstate": "~4.6.7",
    "zone.js": "~0.11.8"
}

Dialog显示异常截图 #

问题排查与解决办法 #

1. 修复Devkit版本不匹配问题
   你的Angular核心版本为15.2.9，但@angular-devkit/core和@angular-devkit/schematics使用了16.1.8，跨版本会引发兼容性问题。将这两个依赖降级到15.x版本，执行以下命令后重新安装依赖：

   npm install @angular-devkit/core@^15.2.9 @angular-devkit/schematics@^15.2.9 --save-dev
   

2. 调整Standalone组件的模块导入
   被打开的Dialog组件无需导入MatDialogModule，只需在调用dialog.open的父组件中导入即可。移除Dialog组件imports数组中的MatDialogModule，避免重复导入冲突。

3. 确保FormControl正确初始化
   errorState报错通常与表单控件状态相关，确认组件中正确初始化addPhonenumberForm：

   addPhonenumberForm = new FormGroup({
     phonenumber: new FormControl('', Validators.required)
   });
   

4. 检查调用组件的模块依赖
   调用dialog.open的父组件如果是standalone模式，必须在其imports中导入MatDialogModule；如果是NgModule模式，需在所属模块的imports中导入MatDialogModule。

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