angular - 非同期イベントに応答してカスタム ErrorHandler プロバイダーによって開かれたダイアログが閉じない

Question

Angularアプリケーション全体でさまざまな目的に使用する一般的なアラートダイアログコンポーネントがあります(簡略化)...

@Component({
  selector: 'app-alert-dialog',
  template: `<mat-dialog-content>{{message}}</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-raised-button mat-dialog-close>{{buttonText}}</button>
</mat-dialog-actions>`
})
export class AlertDialog {
  message: string = 'An unspecified error has occurred';
  buttonText = 'Cancel';

  constructor(
    @Inject(MAT_DIALOG_DATA)
    private data: {
      message: string;
      buttonText: string;
    },
    private dialogRef: MatDialogRef<AlertDialog>
  ) {
    if (data?.message) this.message = data.message;
    if (data?.buttonText) this.buttonText = data.buttonText;
  }
}

ダイアログ ウィンドウは、app.module プロバイダーの既定のオプションを指定します。

@NgModule({
  ...
  providers: [
    { provide: ErrorHandler, useClass: ErrorHandlerService },
    // default options for dialogs
    {
      provide: MAT_DIALOG_DEFAULT_OPTIONS,
      useValue: {
        disableClose: true,
        hasBackdrop: true
      }
    }
  ]
})

また、アラート ダイアログを介して関連するエラーを表示するカスタム ErrorHandler プロバイダーも実装します。

@Injectable({
  providedIn: 'root'
})
export class ErrorHandlerService extends ErrorHandler {
  constructor(private dialog: MatDialog) {
    super();
  }

  handleError(err: any): void {
    console.error(err);

    this.dialog.open(AlertDialog, {
      data: { message: err.message }
    });
  }
}

表示されるエラーは、多くの場合、バックエンド サーバーから非同期的に返されたものです。

エラーが非同期的にスローされた場合、(click)="closeDialog()"ボタンをクリックしてからボタン以外の場所をクリックしない限り、ダイアログはボタンに応答して閉じません (ハンドラーを使用しても)。

ここで問題を示す StackBlitz プロジェクトがあります: https://stackblitz.com/edit/angular-ivy-b3fqjj

ボタンを 1 回クリックするだけで非同期に開いたダイアログを閉じる方法はありますか?