ERROR NullInjectorError: R3InjectorError(AppModule)[MatDialogConfig -> MatDialogConfig]:

Question

I am working on an Angular App and get the following exception:

ERROR NullInjectorError: R3InjectorError(AppModule)[MatDialogConfig -> MatDialogConfig]:

This is my app.module.ts It contains the import for MatDialogModule It also contains providers for MatDialogRef and MAT_DIALOG_DATA as I've seen this done on other posts but I've also seen comments that these cannot be used as providers so I am not sure what is correct here.

import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import {TranslateModule} from '@ngx-translate/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {DashboardModule} from './modules/dashboard/dashboard.module';
import {WebsiteModule} from './modules/website/website.module';
import {RouterModule} from '@angular/router';
import {AdminDashboardModule} from './modules/admin_dashboard/admin-dashboard.module';
import {
    MAT_DIALOG_DATA,
    MAT_DIALOG_DEFAULT_OPTIONS,
    MatDialog,
    MatDialogModule,
    MatDialogRef
} from '@angular/material/dialog';
import {AuthInterceptorService} from './services/request/auth-interceptor.service';
import {FIREBASE_OPTIONS} from '@angular/fire/compat';
import {environment} from '../environments/environment';
import {MatInputModule} from "@angular/material/input";
import {MatFormFieldModule} from "@angular/material/form-field";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        RouterModule,
        AppRoutingModule,
        HttpClientModule,
        FormsModule,
        ReactiveFormsModule,
        MatDialogModule,
        MatInputModule,
        MatFormFieldModule,
        DashboardModule,
        WebsiteModule,
        AdminDashboardModule,
        TranslateModule.forRoot(),
    ],
    exports: [MatFormFieldModule, MatInputModule],
    providers: [
        AuthInterceptorService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptorService,
            multi: true,
        },
        {provide: FIREBASE_OPTIONS, useValue: environment.firebase},
        {
            provide: MatDialogRef,
            useValue: {}
        },
        {provide: MAT_DIALOG_DATA, useValue: {}},
    ],
    bootstrap: [AppComponent],
})
export class AppModule {
}

This is one of the dialogs I created (there are more but they all should be the same)

import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {DialogData} from "../../../website/dialogs/auth/login_dialog/login-dialog.component";
import {FormBuilder, FormGroup} from "@angular/forms";
import {MatFormFieldControl} from "@angular/material/form-field";

@Component({
    selector: 'app-edit-row-dialog',
    templateUrl: './edit-row-dialog.component.html',
    styleUrls: ['./edit-row-dialog.component.css'],
    providers: [
        {provide: MatFormFieldControl, useExisting: EditRowDialogComponent}
    ]
})
export class EditRowDialogComponent {

    form: FormGroup;
    seats: number = 20;

    constructor(
        private formBuilder: FormBuilder,
        public dialogRef: MatDialogRef<EditRowDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: DialogData
    ) {
        this.form = this.formBuilder.group({
            seats: [this.seats, []]
        });
    }

    ngOnInit() {
        console.log("here")
        console.log(this.data)
    }

    closeDialog(): void {
        this.dialogRef.close(false);
    }

    save(): void {
        this.dialogRef.close(false);
    }

}

<h1 mat-dialog-title>Edit Rows</h1>

<div class="row">
    <div class="col-md-6">
        <label for="seats" i18n>Seats</label>
    </div>
    <div class="col-md-6">
        <mat-form-field>
            <input
                    matInput
                    type="number"
                    i18n_placeholder="Seats"
                    placeholder="Seats"
                    name="sectionSpace"
                    id="seats"
                    formControlName="seats"
                    (keyup.enter)="save()"
            />
        </mat-form-field>
    </div>
</div>

<div mat-dialog-actions>
    <button mat-button (click)="closeDialog()" i18n>Cancel</button>
    <button mat-button i18n>Save</button>
</div>

Does anyone know how to troubleshoot this issue?

Answer 1

It looks like you might not be injecting your actual component into the module. Can you try adding EditRowDialogComponent into your AppModule under declarations and let me know if that works?