Angular NullInjectorError: Нет поставщика для MatDialog

Question

, поэтому, когда я пытаюсь загрузить свое приложение angular, я получаю эту ошибку:

ERROR Error: Uncaught (in promise): 
NullInjectorError: StaticInjectorError(AppModule)[AppComponent -> MatDialog]:    
StaticInjectorError(Platform: core)[AppComponent -> MatDialog]:

мой ts-файл выглядит следующим образом, каждый второй вопрос о помощи говорит о добавлении MatDialog в мой импорт NgModule, но Я сделал это и все еще получаю ошибку. Большинство из этих ошибок были StaticInjectorErrors, а моя - NullInjectorError, но я не уверен, в чем разница между этими двумя.

import { Component, NgModule } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { compileNgModule } from '@angular/compiler';
import { AppDialog } from '../appDialog/app-dialog.component';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html'
})
@NgModule({
  imports: [MatDialog, MatDialogRef, MatDialogConfig, MatDialogModule]
})
export class AppComponent {


  constructor(private appService: AppService, private dialog: MatDialog) {
  }

  openDialog() {

    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.height = "350px";
    dialogConfig.width = "600px";
    dialogConfig.data = {
    };

    const dialogRef = this.dialog.open(AppDialog, dialogConfig);
    dialogRef.afterClosed().subscribe(result => {
      console.log('closed dialog');
      this.success = result;
    })
  }
}

Answer 1

В моей ситуации я видел эту ошибку при попытке создать компонент диалога, такой как:

my-dialog.component.ts

<mat-dialog-container>
  <mat-dialog-content>
    <p>Hello</p>
    <p>I am a dialog</p>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-raised-button>Click me</button>
  </mat-dialog-actions>
</mat-dialog-container>

Проблема заключалась в том, что я использовал mat-dialog-container. Это не требуется для компонентов, которые вы будете визуализировать с помощью matDialog.open(MyDialogComponent)

Вместо этого просто полностью удалите mat-dialog-container и просто используйте дочерние узлы.

Answer 2

Обратите внимание, что в Angular Material вы должны импортировать все элементы module в module.ts. Вы должны импортировать и добавить модуль в ваш module.ts, как это

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


import : [MatDialogModule]

Для справки см. Пример из официальной документации здесь