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?

score 0 · Answer 1 · answered Aug 19 '23 at 18:15

0

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?

answered Aug 19 '23 at 18:15

Myles Morrone

163
9

It still gives the same issue. The EditRowDialogComponent was before declared in a different module. I moved it to AppModule but it still says the same. – FJ97 Aug 19 '23 at 19:32
Ah ok, so you had a submodule. I would definitely recommend exporting from your main module then, assuming you import the main module into the submodule. – Myles Morrone Aug 19 '23 at 21:47
I actually import the Submodules into my main module. – FJ97 Aug 24 '23 at 07:30
Why would you import your submodules into the main module? That defeats the purpose of separating them into submodules and removes the ability to lazy load anything. If everything is a part of your main module, everything has to be loaded as soon as the app is initialized resulting in massively increased loading times as compared to separating things into "as-needed inclusions" for your submodules. – Myles Morrone Aug 24 '23 at 15:14

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

1 Answers1