primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.34k stars 4.57k forks source link

Cannot read properties of undefined (reading 'instance') at DialogService.getInstance #14856

Open sibinxsimelabs opened 7 months ago

sibinxsimelabs commented 7 months ago

Describe the bug

getInstance method product Cannot read properties of undefined (reading 'instance') at DialogService.getInstance error. So component not displaying . Same can be reproduce in PrimeNG dynamic dialog example

Environment

Development

Reproducer

https://stackblitz.com/edit/nga6lg

Angular version

17.1.X

PrimeNG version

17.7.X

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.9.0

Browser(s)

Edge

Steps to reproduce the behavior

  1. Create Dynamic dialog
  2. With/Without data
  3. Inside constructor , try to call getInstace method

Expected behavior

It should not throw any error and show dynamic dialog component

THammami01 commented 5 months ago

Encountering the same problem as well.

salvatoremadonia commented 4 months ago

same problem and i solved with:

this.instance = this.dialogService.dialogComponentRefMap.get(ref)?.instance;

THammami01 commented 4 months ago

same problem and i solved with:

this.instance = this.dialogService.dialogComponentRefMap.get(ref)?.instance;

@salvatoremadonia Didn't solve it for me.

eldonato commented 4 months ago

If what you want is the config object passed on the dialogService.open method, you can workaround by passing a DynamicDialogConfig in the constructor of the component you're opening.

Something like this:

@Component({
  standalone: true,
  imports: [DynamicDialogModule],
  selector: 'app-dialog-test',
  providers: [DialogService],
  template: `<p>{{ config.data.message }}</p>`
})
export class DialogTestComponent {
  constructor(private ref: DynamicDialogRef, public config: DynamicDialogConfig ) { }
}
THammami01 commented 4 months ago

Thanks! This solves the problem.

image

B34v0n commented 4 months ago

I got the same error, but my dialog shows it's content. My error is in the following method: https://github.com/primefaces/primeng/blob/master/src/app/components/dynamicdialog/dynamicdialog.ts#L329

loadChildComponent(componentType: Type<any>) {
        let viewContainerRef = this.insertionPoint?.viewContainerRef;
        viewContainerRef?.clear();

        this.componentRef = viewContainerRef?.createComponent(componentType);
        this.dialogRef.onChildComponentLoaded.next(this.componentRef!.instance);
    }

this.componentRef is undefined.

tobika commented 2 months ago

In case this helps someone, I completely forgot to import my custom dialog component (standalone) in the component that was opening the dialog. Angular rendered the template but it was not functional and there was no error in the console 😅