Multiple services with Primeng dynamic dialogs interfere with each other

Question

I am struggling with an angular/primeng problem. I have two services in different modules each of which use DialogService to create a DynamicDialog component.

I have read that you need separate instances of the DialogService if you have multiple modals at the same time. I tried to accomplish this by putting each service in their own module and putting DialogService in the "providers" section of each module.

Each modal works fine by itself, but I have a situation where both modals are displayed simultaneously. In this case, after I close the second modal, I can't close the first modal, even though the close code is fired and returns result.

The stackblitz for an example of this problem is:

https://stackblitz.com/github/thomasesh/twomodalproblem

Any help would be greatly appreciated.

Answer 1

the reason is angular DI. you importing module-a and module-b in app-module. they both provide DialogService. and because of how DI works the SINGLE instance of a service is created. it is imo primeng bug, but to workaround it you can create a token and provide(and inject also) second instance of a service with the token, rather than using the same instance of a service

// token.ts
export const DialogServiceToken = new InjectionToken('DialogService');
//module-b.ts

providers: [
 { provide: DialogServiceToken, useClass: DialogService} // this will register second instance of DialogService
]

//module-b.service
constructor( @Inject(dialogServiceToken) private dialogService: DialogService) {} // here we inject the second instance of a service 

Answer 2

Andrei in accepted answer has explained well the "bug" in primeng however for me it was sufficient to add a new DialogService to providers in the component that is opening the second dynamic dialog

@Component({
  templateUrl: './....component.html',
  providers: [DialogService],
})