Sou iniciante em Angular e TypeScript e estou tentando aproveitar um componente já existente. Porém, quando chamo o componente, ele não é exibido e o seguinte erro ocorre no console.
> ERROR Error: Uncaught (in promise): NullInjectorError:
> R3InjectorError(AppModule)[MatDialogRef -> MatDialogRef ->
> MatDialogRef]: NullInjectorError: No provider for MatDialogRef!
> NullInjectorError: R3InjectorError(AppModule)[MatDialogRef ->
> MatDialogRef -> MatDialogRef]: NullInjectorError: No provider for
> MatDialogRef!
> at NullInjector.get (core.mjs:11095:1)
> at R3Injector.get (core.mjs:11262:1)
> at R3Injector.get (core.mjs:11262:1)
> at R3Injector.get (core.mjs:11262:1)
> at NgModuleRef.get (core.mjs:21807:1)
> at Object.get (core.mjs:21484:1)
> at lookupTokenUsingModuleInjector (core.mjs:3334:1)
> at getOrCreateInjectable (core.mjs:3446:1)
> at Module.ɵɵdirectiveInject (core.mjs:14381:1)
> at NodeInjectorFactory.DialogUserComponent_Factory [as factory] (dialog-user.component.ts:12:33)
> at resolvePromise (zone.js:1213:1)
> at resolvePromise (zone.js:1167:1)
> at zone.js:1279:1
> at ZoneDelegate.invokeTask (zone.js:406:1)
> at Object.onInvokeTask (core.mjs:25444:1)
> at ZoneDelegate.invokeTask (zone.js:405:1)
> at Zone.runTask (zone.js:178:1)
> at drainMicroTaskQueue (zone.js:582:1)
> at ZoneTask.invokeTask [as invoke] (zone.js:491:1)
> at invokeTask (zone.js:1600:1) defaultErrorLogger @ core.mjs:6461 handleError @ core.mjs:6508 next @ core.mjs:26015 (anonymous) @
> Subscriber.js:110
> _next @ Subscriber.js:60 next @ Subscriber.js:31 (anonymous) @ Subject.js:31 errorContext @ errorContext.js:19 next @ Subject.js:26
> emit @ core.mjs:22402 (anonymous) @ core.mjs:25483 invoke @
> zone.js:372 run @ zone.js:134 runOutsideAngular @ core.mjs:25356
> onHandleError @ core.mjs:25483 handleError @ zone.js:376 runGuarded @
> zone.js:147 api.microtaskDrainDone @ zone.js:1074 drainMicroTaskQueue
> @ zone.js:589 invokeTask @ zone.js:491 invokeTask @ zone.js:1600
> globalZoneAwareCallback @ zone.js:1626
Este é o arquivo profile.componente.html onde eu chamo o componente
<mat-sidenav-container hasBackdrop="true">
<div class="component-content">
<mat-card>
<mat-card-title><strong>Meu Perfil</strong></mat-card-title>
<mat-card-content>
<app-dialog-user [_user]="user"></app-dialog-user>
</mat-card-content>
</mat-card>
</div>
</mat-sidenav-container>
E este é o componente dialog-user.component.ts que eu estou tentando chamar
import { Component, Inject, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { IAbility, IDialogAddEditUser, IUser } from 'src/app/shared/models';
import { UsersService } from 'src/app/shared/services';
@Component({
selector: 'app-dialog-user',
templateUrl: './dialog-user.component.html',
styleUrls: ['./dialog-user.component.css']
})
export class DialogUserComponent implements OnInit {
//Privadas
//private _user?: IUser;
@Input() _user?: IUser;
//Públicas
allAbilities: Array<IAbility>;
//Fomrulário
form: FormGroup;
constructor(
private usersService: UsersService,
public dialogRef: MatDialogRef<DialogUserComponent>,
@Inject(MAT_DIALOG_DATA) public data: IDialogAddEditUser
) {
this._user = data.user;
this.allAbilities = this.usersService.getAbilities();
this.form = new FormGroup({
id: new FormControl(this._user ? this._user.id : ''),
name: new FormControl(this._user ? this._user.name : '', [Validators.required, Validators.maxLength(255)]),
email: new FormControl(this._user ? this._user.email : '', [Validators.required, Validators.maxLength(255), Validators.email]),
abilities: new FormControl(this._user ? this._user.abilities : '', [Validators.required]),
});
}
ngOnInit(): void { }
/**
* Define se é obrigatório o preenchimento da senha; apenas para novos usuários.
*
* @returns boolean
*/
isRequirePassword(): boolean {
return this._user ? false : true;
}
onSubmit() {
this.dialogRef.close(this.form.value);
}
/**
* Retorna uma mensagem de erro para o campo Name
*
* @returns string | void
*/
getErrorsMsgFieldName(): string | void {
if (this.form.get('name')?.hasError('required')) {
return 'Campo obrigatório';
} else if (this.form.get('name')?.hasError('maxLength')) {
return 'Limite máximo excedido';
}
}
/**
* Retorna uma mensagem de erro para o campo Email
*
* @returns string | void
*/
getErrorsMsgFieldEmail(): string | void {
if (this.form.get('email')?.hasError('required')) {
return 'Campo obrigatório';
} else if (this.form.get('email')?.hasError('email')) {
return 'E-mail não é válido';
} else if (this.form.get('email')?.hasError('maxLength')) {
return 'Limite máximo excedido';
}
}
}
Alguém poderia me mostrar como corrigir este erro? Estou utilizando o Angular8 com Material Design.