ERROR NullInjectorError: R3InjectorError(n)[_0 -> _0 -> _0]: NullInjectorError: No provider for _0! --- When using Angular MatDialog

Question

I am having this error at run time when trying to open an Angular MatDialog. I have done some research and I found a lot of posts related to missing providers issues, but as this message is not clear for me, I don't know if what is missing is something on my app.module.ts in the providers or if it is something else.

About my dialog, I am trying to open it from a component that lists items, and the dialog should open a form to maintain this item.

Here are my files:

app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { MatDialogModule } from '@angular/material/dialog';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input'

import { AppComponent } from './app.component';
import { CreateWorkerComponent } from './component/create-worker/create-worker.component';
import { MaintainWorkGroupComponent } from './component/maintain-work-group/maintain-work-            group.component';

import { Session } from './model/entity/Session';
import { ListWorkGroupComponent } from './component/list-work-group/list-work-    group.component';
import { ItemWorkGroupComponent } from './component/item-work-group/item-work-    group.component';

@NgModule({
  declarations: [
    AppComponent,
    CreateWorkerComponent,
    MaintainWorkGroupComponent,
    ListWorkGroupComponent,
    ItemWorkGroupComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MatDialogModule,
    MatCardModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [
    Session,
    AppComponent,
    ItemWorkGroupComponent,
    MaintainWorkGroupComponent
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    ItemWorkGroupComponent,
    MaintainWorkGroupComponent
  ]
})
export class AppModule { }

My component that opens the dialog:

item-work-group.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Session } from '../../model/entity/Session';
import { WorkGroup } from '../../model/entity/WorkGroup';
import { MaintainWorkGroupComponent } from '../maintain-work-group/maintain-work-group.component';

@Component({
  selector: 'app-item-work-group',
  templateUrl: './item-work-group.component.html',
  styleUrls: ['./item-work-group.component.css']
})
export class ItemWorkGroupComponent implements OnInit {
  @Input() workGroup!: WorkGroup;

  private maintainWorkGroup: MaintainWorkGroupComponent;
  private dialogRef!: MatDialogRef<MaintainWorkGroupComponent>;

  constructor(private session: Session, private matDialog: MatDialog) { 
    this.maintainWorkGroup = new MaintainWorkGroupComponent(this.session, this.workGroup, this.dialogRef);
  }

  ngOnInit(): void {
  }

  public openMaintainDialog() {
    this.dialogRef = this.matDialog.open(MaintainWorkGroupComponent, {
      autoFocus: true,
      closeOnNavigation: true,
    });
    this.dialogRef.componentInstance = this.maintainWorkGroup;

    this.dialogRef.afterClosed().subscribe(result => {} });
  }
}

item-work-group.component.html

<tr>
    <td scope="col">
        {{ this.workGroup.name }}
    </td>
    <td>
        {{ this.workGroup.description }}
    </td>
    <td>
        <a href="#" class="btn btn-sm btn-primary my-1 my-sm-0" (click)="openMaintainDialog()">
            <span class="fas fa-edit mr-1"></span>
            Edit
        </a>
        <a href="#" class="btn btn-sm btn-danger my-1 my-sm-0">
            <span class="fas fa-trash mr-1"></span>
            Delete
        </a>
    </td>
</tr>

My dialog component:

maintain-work-group.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { Session } from '../../model/entity/Session';
import { WorkGroup } from '../../model/entity/WorkGroup';
import constants from '../../util/constants';

@Component({
  selector: 'app-maintain-work-group',
  templateUrl: './maintain-work-group.component.html',
  styleUrls: ['./maintain-work-group.component.css']
})
export class MaintainWorkGroupComponent implements OnInit {
  public workGroup!: WorkGroup;

  private session!: Session;
  private operationType: string = constants.COMPONENT.MAINTAIN.OPERATION_TYPE.POST;

  constructor(session: Session, workGroup: WorkGroup | null, public thisDialogRef: MatDialogRef<MaintainWorkGroupComponent>) {
    if (!workGroup) 
      this.workGroup = new WorkGroup("", "");
    else
      this.operationType = constants.COMPONENT.MAINTAIN.OPERATION_TYPE.PUT;

    this.session = session;
  }

  ngOnInit(): void {
  }

  public onSubmit(form: NgForm): void {
    if (this.operationType = constants.COMPONENT.MAINTAIN.OPERATION_TYPE.POST)
      this.session.apiManager.WorkGroupApi.createWorkGroup(this.workGroup);
    else
      this.session.apiManager.WorkGroupApi.updateWorkGroup(this.workGroup);

    //this.session.apiManager.PostApi.createPost(post);
    this.thisDialogRef.close();
  }

  public onClose(): void {
    this.thisDialogRef.close();
  }
}

maintain-work-group.component.html

<div class="card spur-card">
  <div class="card-header">
    <div class="spur-card-icon">
      <i class="fas fa-chart-bar"></i>
    </div>
    <div class="spur-card-title"> Grupo de Trabalho </div>
  </div>
  <div class="card-body ">
    <form  novalidate #form="ngForm" (ngSubmit)="onSubmit(form)">
      <div class="form-group">
        <label for="name">Nome</label>
        <input type="text"  class="form-control" name="name" id="name" 
              required minlength="1" [(ngModel)]="this.workGroup.name">
      </div>
      <div class="form-group">
        <label for="description">Descrição</label>
        <textarea name="description" class="form-control" rows="3" id="description"
              required minlength="5" [(ngModel)]="this.workGroup.description"></textarea>
      </div>
      <button type="submit" class="btn btn-primary" [disabled]="!form.form.valid">Salvar</button>
      <button type="submit" (click)="onClose()" class="btn btn-primary btn-form">Cancelar</button>
    </form>
  </div>
</div>

The entire error message:

ERROR NullInjectorError: R3InjectorError(n)[_0 -> _0 -> _0]: 
  NullInjectorError: No provider for _0!
    at G_.get (main.5e92b1842e25d401b10e.js:1)
    at FI.get (main.5e92b1842e25d401b10e.js:1)
    at FI.get (main.5e92b1842e25d401b10e.js:1)
    at FI.get (main.5e92b1842e25d401b10e.js:1)
    at nk.get (main.5e92b1842e25d401b10e.js:1)
    at Object.get (main.5e92b1842e25d401b10e.js:1)
    at ng (main.5e92b1842e25d401b10e.js:1)
    at ig (main.5e92b1842e25d401b10e.js:1)
    at _ (main.5e92b1842e25d401b10e.js:1)
    at Ys.n.ɵfac [as factory] (main.5e92b1842e25d401b10e.js:1)
lT @ main.5e92b1842e25d401b10e.js:1
handleError @ main.5e92b1842e25d401b10e.js:1
$_ @ main.5e92b1842e25d401b10e.js:1
Py @ main.5e92b1842e25d401b10e.js:1
s @ main.5e92b1842e25d401b10e.js:1
(anonymous) @ main.5e92b1842e25d401b10e.js:1
invokeTask @ polyfills.736aa85c1272f550163c.js:1
onInvokeTask @ main.5e92b1842e25d401b10e.js:1
invokeTask @ polyfills.736aa85c1272f550163c.js:1
runTask @ polyfills.736aa85c1272f550163c.js:1
invokeTask @ polyfills.736aa85c1272f550163c.js:1
S @ polyfills.736aa85c1272f550163c.js:1
D @ polyfills.736aa85c1272f550163c.js:1

Thanks in advance!

Answer 1

Well, I ended giving up on using dialogs in my application, but later I faced a very similar issue and I figured the exactly null injection when trying to create a stackblitz , which provided a more detailed error. Based on that, I suppose that I need to add the MatDialog ( MatDialogModule ) in my providers inside my app.module.ts .