title: Unexpected value 'MatDialogRef' imported by the module 'AppModule'. Please add a @NgModule annotation
body: <p>I am trying to integrate Angular Material in Angular but getting following error. The program is compiled successfully but getting this issue in browser.</p>
  
  <pre><code>Uncaught Error: Unexpected value 'MatDialogRef' imported by the module 'AppModule'. Please add a @NgModule annotation.
      at syntaxError (compiler.js:485)
      at eval (compiler.js:15226)
      at Array.forEach (&lt;anonymous&gt;)
      at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15201)
      at JitCompiler._loadModules (compiler.js:34385)
      at JitCompiler._compileModuleAndComponents (compiler.js:34346)
      at JitCompiler.compileModuleAsync (compiler.js:34240)
      at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
      at PlatformRef.bootstrapModule (core.js:5551)
      at eval (main.ts:11)
  </code></pre>
  
  <p>I have imported MatDialogRef in app.module.ts</p>
  
  <pre><code>import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
  
  imports: [
      BrowserModule,
      FormsModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatDialogModule,
      MatDialogRef,
      ReactiveFormsModule,
      HttpModule,
      HttpClientModule,
      AppRoutingModule
    ],
  </code></pre>
  
  <p>I have also imported it in the component where dialog html is saved.</p>
  
  <pre><code>import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
  </code></pre>
  
  <p>export class ComposeMailComponent implements OnInit {</p>
  
  <pre><code>constructor(private dialogRef: MatDialogRef&lt;ComposeMailComponent&gt;,
        @Inject(MAT_DIALOG_DATA) private data) {}
  
    ngOnInit() {
    }
  }
  </code></pre>