Unexpected value 'MatDialogRef' imported by the module 'AppModule'. Please add a @NgModule annotation
12,668
Solution 1
You dont need to import MatDialogRef
inside app.module.ts, Change
From
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
To
import { MatDialogModule} from '@angular/material';
and remove MatDialogRef
from imports
array
Solution 2
add these in app.module.ts file
import { MatDialogModule} from '@angular/material';
imports: [ MatDialogModule ],
it will work fine
Comments
-
D555 almost 2 years
I am trying to integrate Angular Material in Angular but getting following error. The program is compiled successfully but getting this issue in browser.
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 (<anonymous>) 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)
I have imported MatDialogRef in app.module.ts
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; imports: [ BrowserModule, FormsModule, BrowserAnimationsModule, MatButtonModule, MatDialogModule, MatDialogRef, ReactiveFormsModule, HttpModule, HttpClientModule, AppRoutingModule ],
I have also imported it in the component where dialog html is saved.
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
export class ComposeMailComponent implements OnInit {
constructor(private dialogRef: MatDialogRef<ComposeMailComponent>, @Inject(MAT_DIALOG_DATA) private data) {} ngOnInit() { } }