entonces, cuando intento cargar mi aplicación angular, aparece este error:
ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AppComponent -> MatDialog]: StaticInjectorError(Platform: core)[AppComponent -> MatDialog]:mi archivo ts se ve así, todas las demás preguntas de ayuda decían que agregara MatDialog a mis importaciones de NgModule, pero lo hice y sigo recibiendo el error. La mayoría de esos errores fueron StaticInjectorErrors y el mío es NullInjectorError, pero no estoy seguro de cuál es la diferencia entre esos dos.
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; }) } }En mi situación, estaba viendo este error al intentar construir un componente de diálogo como:
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> El problema era que estaba usando mat-dialog-container . Esto no es necesario para los componentes que renderizará a través de matDialog.open(MyDialogComponent)
En su lugar, simplemente elimine mat-dialog-container completo y use los nodos secundarios.
Tenga en cuenta que en Angular Material debe importar todos los module de elementos en su module.ts . Tienes que importar y agregar un módulo en tu module.ts así
import {MatDialogModule} from '@angular/material/dialog'; import : [MatDialogModule]Para referencia, vea el ejemplo de la documentación oficial aquí