title: Cannot read property 'hasAttached' of undefined at MatDialogContainer.attachComponentPortal
body: <p>Mat dialog is not opening and its throwing this error.
  I also attached the parent component and dialog codes.</p>
  <pre><code>core.js:6272 ERROR TypeError: Cannot read property 'hasAttached' of undefined
  at MatDialogContainer.attachComponentPortal (dialog.js:187)
  at MatDialog._attachDialogContent (dialog.js:797)
  at MatDialog.open (dialog.js:675)
  at parentComponent.openJustMeDialog (.component.ts:121)
  at parentComponent_div_0_Template_span_click_19_listener (parent.component.html:28)
  at executeListenerWithErrorHandling (core.js:22086)
  at wrapListenerIn_markDirtyAndPreventDefault (core.js:22128)
  at HTMLSpanElement.&lt;anonymous&gt; (platform-browser.js:976)
  at ZoneDelegate.invokeTask (zone-evergreen.js:399)
  at Object.onInvokeTask (core.js:41916)
  </code></pre>
  <p><strong>Parent component</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
      import { MatDialog, MatDialogRef } from '@angular/material';
      import { justMeDialog } from './justme-dialog/justme.dialog';
     @Component({
     selector: 'app-parent',
     templateUrl: './parent.component.html',
     styleUrls: ['./parent.component.css']
     })
    export class parentComponent implements OnInit {
  
    constructor(public dialog: MatDialog) {
    }
  
    openJustMeDialog(){
      let justMeDialogRef = this.dialog.open(justMeDialog); &lt;--- this one is throwing error
     }
   }
  
  </code></pre>
  <p><strong>Dialog component</strong></p>
  <pre><code>    import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-justMeDialog',
    templateUrl: 'justme.dialog.html',
    styleUrls: ['justme.dialog.css']
  })
  export class justMeDialog {
  
    constructor() {
    }
  }
  
  </code></pre>
  <p>I also imported the mat dialog module to app module.</p>