web-dev-qa-db-ja.com

モジュール「AppModule」によってインポートされた予期しない値「MatDialogRef」。 @NgModuleアノテーションを追加してください

Angular Material in Angularを統合しようとしていますが、次のエラーが発生します。プログラムは正常にコンパイルされましたが、ブラウザでこの問題が発生します。

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)

App.module.tsにMatDialogRefをインポートしました

import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';

imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatDialogModule,
    MatDialogRef,
    ReactiveFormsModule,
    HttpModule,
    HttpClientModule,
    AppRoutingModule
  ],

ダイアログhtmlが保存されているコンポーネントにもインポートしました。

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

エクスポートクラスComposeMailComponentはOnInitを実装します{

constructor(private dialogRef: MatDialogRef<ComposeMailComponent>,
      @Inject(MAT_DIALOG_DATA) private data) {}

  ngOnInit() {
  }
}
angulartypescriptmaterial-designangular-materialangular-material2
5
D555

インポートする必要はありませんMatDialogRef app.module.ts内、変更

から

import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';

に

import { MatDialogModule} from '@angular/material';

MatDialogRef配列からimportsを削除します

7
Sajeetharan

これらをapp.module.tsファイルに追加します

import {MatDialogModule} from '@ angular/material';

インポート：[MatDialogModule]、

それはうまくいくでしょう

2
Menna Ramadan