1

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.

2 Respostas 2

0

É preciso declarar o módulo MatDialogModule no módulo que declara seu componente dialog-user.component.ts. Caso seja o AppModule, basta importar o módulo dentro do mesmo.

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

@NgModule({
  declarations: [
    ...
    DialogUserComponent,
    ...
  ],
  imports: [
    ...
    MatDialogModule,
    ...
  ],
  ...

https://material.angular.io/components/dialog/api

3
  • Eu já tinha adicionado o MatDialogModule no imports do meu AppModule. E mesmo assim o erro persiste.
    – user282046
    Commented 26/07/2022 às 18:33
  • Você está declarando seu DialogUserComponent no AppModule ou ele tem um módulo próprio?
    – Victor
    Commented 27/07/2022 às 17:33
  • Ele tem um módulo próprio que carrega todas as importações e o MatDialogModule está nele.
    – user282046
    Commented 28/07/2022 às 18:44
0

Você esta tentando usar um component dialog em um template. caso seja isso. será necessário remover as referencias dele como dialog do arquivo no dialog-user.component.ts.

remova ->

public dialogRef: MatDialogRef<DialogUserComponent>,
@Inject(MAT_DIALOG_DATA) public data: any

...
this.dialogRef.close(this.form.value);
...

Mas isso não deixara você o usar como um dialog em outros locais. então aconselharia a criar um component novo para o usar no template e deixar o que esta como dialog sem modificação.

1
  • 1
    Obrigada! Vou criar um novo component.
    – user282046
    Commented 1/08/2022 às 18:19

Você deve fazer log-in para responder a esta pergunta.