Can't inject environmentInjector into dialog opened by DialogService

[axos88]

Describe the bug

Opening a standalone dynamic dialog via the DialogService does not inherit the environment injector of the component making the call.
This leads to NullInjection issues if the opened standalone (maybe also non-standalone?) component uses providers that are NOT {providedIn: root}, but rather an intermediate module / component was providing them.

I've hacked around a solution locally, to fix the bug two things need to be made:

1. extend the DynamicDialogConfig with an environmentInjector?: EnvironmentInjector field.
2. In the DynamicDialogComponent in loadChildComponent method, replace the last line with:

    this.componentRef = viewContainerRef?.createComponent(componentType, {environmentInjector: this.config.environmentInjector });

Environment

angular 17

Reproducer

No response

Angular version

17

PrimeNG version

master

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[Draganlazarev90]

Did you manage to find a workaround for this except from changing the source code?

[cetincakiroglu]

Related to #14730

[cetincakiroglu]

Hi,

Your workaround solution seems to be correct, could you please open a PR so we can review the solution? Moving the issue to the 17.8.0 milestone while waiting the feedback from you.

[Draganlazarev90]

The fix mentioned above requires sending the environment injector in the config, each time you use dialogService.open method. Maybe a different fix can be implemented

[cetincakiroglu]

The strange thing is it works if I provide DemoService inside any parent component instead of module, see the example below. The component ignores the module providers somehow, we're investigating the solutions.

https://stackblitz.com/edit/7qkchf-expefk?file=src%2Fapp%2Fdemo%2Fdialog.component.ts,src%2Fapp%2Fdemo%2Fdemo.service.ts

[Draganlazarev90]

Correct, somehow it doesn't work only with modules

[cetincakiroglu]

@Draganlazarev90

As a workaround, you can try to provide the service on the parent component rather than the module until we fix the issue. Somehow it skips the module providers, we're investigating the issue. It may work with standalone since there isn't a module and services are provided in the component.ts

I'll transfer the issue to the next milestone, we want to solve the issue without adding environmentInjector property to the config since it has to be done by the component itself. But in the opposite scenario, we may add it as a quick solution until we fix it for good.

@axos88 Can you confirm that it also doesn't work with standalone where you provide DemoService in parent component instead of the module?

[cetincakiroglu]

Hi,

After the investigation, we've found the issue caused by injection level difference. You're providing dialogService in the component level and demoService in the module level. Because of this, dialogService fails to find and inject DemoService. It works as expected if both of them are provided at the same level. That's why injecting the DemoService to the component.ts makes it work. Please see the example: https://stackblitz.com/edit/7qkchf-expefk?file=src%2Fapp%2Fdemo%2Fdemo.module.ts

To provide a better guide, we'll update the documentation of DynamicDialog and mention this use. Thanks a lot for reporting the issue!

I am closing the issue since the solution is provided.

[abhijit-chikane]

I have provided the dependencies on the route level
and moving the dialogService to this provider doesn't solve this issue
so above mention workaround is not working for me
is there any other workaround for this scenario?