I had an angular project which I upgraded from 7.2 to 9 following the https://update.angular.io/#7.2:9.0
Post upgrade everything except MatDialog is working. Opening the dialog shows an empty popup of disproportionate size with the following error in the console.
core.js:3866 ERROR Error: Uncaught (in promise): TypeError: Cannot read property "hasAttached" of undefined
TypeError: Cannot read property "hasAttached" of undefined
at MatDialogContainer.push../node_modules/@angular/material/esm5/dialog.es5.js.MatDialogContainer.attachComponentPortal (dialog.es5.js:191)
at MatDialog.push../node_modules/@angular/material/esm5/dialog.es5.js.MatDialog._attachDialogContent (dialog.es5.js:1046)
at MatDialog.push../node_modules/@angular/material/esm5/dialog.es5.js.MatDialog.open (dialog.es5.js:850)
at new AppComponent (app.component.ts:67)
at createClass (core.js:22218)
at createDirectiveInstance (core.js:22087)
at createViewNodes (core.js:30632)
at createRootView (core.js:30546)
at callWithDebugContext (core.js:31554)
at Object.debugCreateRootView [as createRootView] (core.js:31064)
at resolvePromise (zone.js:836)
at resolvePromise (zone.js:795)
at zone.js:897
at ZoneDelegate.invokeTask (zone.js:431)
at Object.onInvokeTask (core.js:27441)
at ZoneDelegate.invokeTask (zone.js:430)
at Zone.runTask (zone.js:198)
at drainMicroTaskQueue (zone.js:611)
at ZoneTask.invokeTask [as invoke] (zone.js:517)
at invokeTask (zone.js:1671)
I have verified from this tutorial https://www.techiediaries.com/angular-material-dialogs/ that the way to use dialog with a custom component is the same. I am not able to provide the actual code because of work policy.
I also tried opting out of ivy thinking if it was the cause of the issue as per this link. But it didn't help.
Did anyone of you also face a similar issue?
Problem solved. I had to upgrade Angular Material CDK to 9.1 and change all import references to the new format:
import { MatDialogModule } from '@angular/material/dialog';
All good now!