ModalDialogParams getting NullInjectorError for components inside page-router-outlet inside modals

[JWiseCoder]

We recently upgraded our app to Angular 14 (from Angular 13), and now all the components inside our modals are unable to get the ModalDialogParams. (When @optional(), the value is null, otherwise it throws a NullInjectorError)

We use components that contain page-router-outlets to allow for routing inside modals. The container component is receiving the ModalDialogParams fine, but the components being routed to in the page-router-outlet do not.

We tracked it down to the change to the page-router-outlet.ts in feature #72 that added support for Angular 14. Specifically, line 347 which changed the scope of the parent injector. If we change this line back to parent: this.location.injector,, we can inject the ModalDialogParams just fine.

Is this expected behavior? We've always been able to inject the ModalDialogParams this way before, but now the parent injector is different than in previous releases.

[JWiseCoder]

Looking at the Angular code that roughly corresponds to this, I think the injector scope in NS Angular is incorrect. In the Angular RouterOutlet, the injector used for the created component is the injector from the location ViewContainerRef. Therefore, changing the parentInjector to being the EnvironmentInjector instead of the injector from the current location I think is not correct. It needs to be changed ASAP so as not to cause issues for those that may already be trying to work around it.

https://github.com/angular/angular/blob/6a88bad0192516f26a5a008c0634b73456b9447c/packages/router/src/directives/router_outlet.ts#L294

[JWiseCoder]

@NathanWalker, what do you think of this issue? This is vital to the operation of the modals in our app, and it's not clear what a workaround for this would be, since the entire injection scope changes for components inside page-router-outlets inside modals.

I can get this injection problem to go away if I delete the change (line 325) that causes the EnvironmentInjector to be used as the parent injector in the Injector.create() further down (line 347).

[JWiseCoder]

I've created a demo project for NS Playground that demonstrates this error. It seems to happen for routes that use lazy-loading for modules.

https://stackblitz.com/edit/nativescript-angular14-modal-page-router-issue

If you use the package.json as is, it will use angular 13, and there will be no error: the ModalDialogParams will be injected correctly. However, if you change out the package.json with package-ng14.json, you will get a NullInjector error when you select an item from a list.

(There is a readme file in the project that also explains the issue)

[edusperoni]

Version 14.2.6-alpha.0 fixes this issue.

I'll work on a refactor and publish that as final:

Link of stackblitz with it working: https://stackblitz.com/edit/nativescript-angular14-modal-page-router-issue-ssutmd?file=src%2Fapp%2Fitem-detail%2Fitem-detail.module.ts

[rob4226]

Thanks so much for fixing this! The older style modals now work again for me!

[edusperoni]

Fixed by #94