No provider for OverlayRef! | Angular Community | Page 1

eager lintel Feb 21, 2025, 5:47 PM

#

ERROR NullInjectorError: R3InjectorError(Standalone[_KeyEntryDialogComponent])[OverlayRef -> OverlayRef -> OverlayRef -> OverlayRef]: 
  NullInjectorError: No provider for OverlayRef!

I get this error when trying to open the following dialog, like so. However, it seems that in this component, it doesn't want to open any dialogs by the look of it. The full component is attached.

      this.dialogService.open(KeyEntryDialogComponent, {
        data: Object.keys(this.form.controls),
      }).afterClosed().pipe(first()).subscribe((result: string | null) => {
        if (result) {
          const control = new FormControl('',
            [
              Validators.required,
              validType,
            ],
          );
          this.form.addControl(result, control);
        }
      });

<mat-dialog-container>
    <mat-dialog-content>
        <mat-form-field appearance="outline">
            <mat-label>Attribute Name</mat-label>
            <input matInput [formControl]="value">
            @if (value.invalid) {
                {{ error() }}
            }
        </mat-form-field>
    </mat-dialog-content>
    <mat-dialog-actions>
        <button mat-button [mat-dialog-close]="null">Cancel</button>
        <button mat-button [mat-dialog-close]="value.value" [disabled]="value.invalid">
            Create
        </button>
    </mat-dialog-actions>
</mat-dialog-container>

📎 kDoaIIa.txt

#

The plot thickens, I can't seem to open any dialogs?

#

Trying to open another dialog that was previously working, like so, I get the same error.

this.dialogService.open(EntryDialogComponent, {
  data: {
    type: {
      type: "string",
    },
    used_keys: [],
  },
}).afterClosed().subscribe(v => console.log("Got", v));

eager lintel Feb 21, 2025, 8:45 PM

#

It may help to know that this is using zoneless, but I'm not sure how that would affect injection

runic stag Feb 21, 2025, 8:58 PM

#

did you tried it with a non standalone component?

eager lintel Feb 21, 2025, 9:00 PM

#

I'll try that

eager lintel Feb 21, 2025, 9:06 PM

#

runic stag did you tried it with a non standalone component?

I made a non standalone component and it seems to work?

#

What in the sweet hell

#

All the components were standalone before, why did it suddenly break? And why does the old way work?

runic stag Feb 21, 2025, 9:07 PM

#

maybe you made some changes? But try it again with a standalone component and add as a provider the OverlayRef

lethal shoal Feb 21, 2025, 9:09 PM

#

Adding OverlayRef as a provider doesn't make any sense.
Can you please show the stacktrace for where the error happens? As in: We want to find out what is trying to inject OverlayRef

eager lintel Feb 21, 2025, 9:09 PM

#

hook.js:608 ERROR NullInjectorError: R3InjectorError(Standalone[_EntryDialogComponent])[OverlayRef -> OverlayRef -> OverlayRef]: 
  NullInjectorError: No provider for OverlayRef!
    at NullInjector.get (core.mjs:1644:21)
    at R3Injector.get (core.mjs:2168:27)
    at R3Injector.get (core.mjs:2168:27)
    at R3Injector.get (core.mjs:2168:27)
    at ChainedInjector.get (core.mjs:4703:32)
    at lookupTokenUsingModuleInjector (core.mjs:5046:31)
    at getOrCreateInjectable (core.mjs:5092:10)
    at ɵɵdirectiveInject (core.mjs:12644:17)
    at ɵɵinject (core.mjs:1106:40)
    at inject (core.mjs:1191:10)
overrideMethod    @    hook.js:608
handleError    @    core.mjs:6643
handleError    @    core.mjs:13921
executeListenerWithErrorHandling    @    core.mjs:29251
wrapListenerIn_markDirtyAndPreventDefault    @    core.mjs:29281
(anonymous)    @    platform-browser.mjs:806

#

Same for the other one

hook.js:608 ERROR NullInjectorError: R3InjectorError(Standalone[_KeyEntryDialogComponent])[OverlayRef -> OverlayRef -> OverlayRef -> OverlayRef]: 
  NullInjectorError: No provider for OverlayRef!
    at NullInjector.get (core.mjs:1644:21)
    at R3Injector.get (core.mjs:2168:27)
    at R3Injector.get (core.mjs:2168:27)
    at R3Injector.get (core.mjs:2168:27)
    at R3Injector.get (core.mjs:2168:27)
    at ChainedInjector.get (core.mjs:4703:32)
    at lookupTokenUsingModuleInjector (core.mjs:5046:31)
    at getOrCreateInjectable (core.mjs:5092:10)
    at ɵɵdirectiveInject (core.mjs:12644:17)
    at ɵɵinject (core.mjs:1106:40)
overrideMethod    @    hook.js:608
handleError    @    core.mjs:6643
handleError    @    core.mjs:13921
executeListenerWithErrorHandling    @    core.mjs:29251
wrapListenerIn_markDirtyAndPreventDefault    @    core.mjs:29281
(anonymous)    @    platform-browser.mjs:806

lethal shoal Feb 21, 2025, 9:11 PM

#

Show KeyEntryDialogComponent please

eager lintel Feb 21, 2025, 9:12 PM

#

<mat-dialog-container>
    <mat-dialog-content>
        <mat-form-field appearance="outline">
            <mat-label>Attribute Name</mat-label>
            <input matInput [formControl]="value">
            @if (value.invalid) {
                {{ error() }}
            }
        </mat-form-field>
    </mat-dialog-content>
    <mat-dialog-actions>
        <button mat-button [mat-dialog-close]="null">Cancel</button>
        <button mat-button [mat-dialog-close]="value.value" [disabled]="value.invalid">
            Create
        </button>
    </mat-dialog-actions>
</mat-dialog-container>

#

import { Component, Inject, OnInit } from '@angular/core';
import { AbstractControl, FormControl, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-key-entry-dialog',
  imports: [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDialogModule,
    MatButtonModule,
  ],
  templateUrl: './key-entry-dialog.component.html',
  styleUrl: './key-entry-dialog.component.css'
})
export class KeyEntryDialogComponent {
  constructor(
    // public dialogRef: MatDialogRef<KeyEntryDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: string[],
  ) { }

  value = new FormControl<string>("",
    [
      Validators.required,
      (control: AbstractControl): ValidationErrors | null => {
        if (this.data && control.value in this.data) {
          return {
            "unique": "Attribute names must be unique",
          };
        }

        return null;
      },
    ],
  );

  error(): string {
    if (this.value.hasError("unique")) {
      return "Attribute names must be unique";
    }

    if (this.value.hasError("required")) {
      return "This value is required";
    }

    return "";
  }
}

lethal shoal Feb 21, 2025, 9:14 PM

#

Huhhh. This is quite strange. Humor me and show the output of npm ls @angular/material?

eager lintel Feb 21, 2025, 9:14 PM

#

Uhhhhhhhhhhhhhhhhhhh

npm ls @angular/material
/home/e/visinv
└── (empty)

#

Oh, whoopsies, one layer lower

#

There we go

npm ls @angular/material
web-ui@0.0.0 /home/e/visinv/web_ui
└── @angular/material@19.0.5

#

I about lost my mind, for a second

lethal shoal Feb 21, 2025, 9:15 PM

#

Sorry, but I really got nothing here without a reproduction that I could run locally to throw a debugger at it.

eager lintel Feb 21, 2025, 9:16 PM

#

Yeah, I've been trying to make one, but am having difficulty doing so. I'll let you know if I can get it to

#

OH WAIT I GOT IT

#

Zipping up now

lethal shoal Feb 21, 2025, 9:22 PM

#

Sorry, but I am not going to download and run some random zip file from Discord. Post it on Stackblitz or GH or something like that.

eager lintel Feb 21, 2025, 9:22 PM

#

Will put it on github

#

Understandable sentiment

#

https://github.com/Jess4Tech/testapp

GitHub

GitHub - Jess4Tech/testapp

Contribute to Jess4Tech/testapp development by creating an account on GitHub.

#

Gives the

hook.js:608 ERROR NullInjectorError: R3InjectorError(Standalone[_TestDialogComponent])[OverlayRef -> OverlayRef -> OverlayRef]: 
  NullInjectorError: No provider for OverlayRef!
    at NullInjector.get (core.mjs:1652:21)
    at R3Injector.get (core.mjs:2176:27)
    at R3Injector.get (core.mjs:2176:27)
    at R3Injector.get (core.mjs:2176:27)
    at ChainedInjector.get (core.mjs:4733:32)
    at lookupTokenUsingModuleInjector (core.mjs:5076:31)
    at getOrCreateInjectable (core.mjs:5122:10)
    at ɵɵdirectiveInject (core.mjs:16858:17)
    at ɵɵinject (core.mjs:1114:40)
    at inject (core.mjs:1199:10)

lethal shoal Feb 21, 2025, 9:27 PM

#

Don't use <mat-dialog-container>

#

The Dialog already adds it.

eager lintel Feb 21, 2025, 9:29 PM

#

That was indeed the problem. What an error message xd

#No provider for OverlayRef!