NullInjectorError for ModalDialogParams when opening a modal with ActionBar

[alexander-mai]

Environment

• CLI: 8.3.3
• Android Runtime: 8.3.1
• iOS Runtime: 8.3.3
• NativeScript-Angular: 14.0.4
• Angular: 14.1.3

Describe the bug
Using modal dialogs is not described in the current documentation for Nativescript 8.x, but in the oder documentation for Nativescript 7.x here: https://v7.docs.nativescript.org/angular/ui/ng-components/modal-view-ng#modal-view-actionbar. When opening a modal with an actionbar the page gets blank and a NullInjectorError for ModalDialogParams is shown in the log:

  ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomeModule)[ModalDialogParams -> ModalDialogParams -> ModalDialogParams -> ModalDialogParams]:
  NullInjectorError: No provider for ModalDialogParams!
  NullInjectorError: R3InjectorError(HomeModule)[ModalDialogParams -> ModalDialogParams -> ModalDialogParams -> ModalDialogParams]:
  NullInjectorError: No provider for ModalDialogParams!
  at NullInjector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:6349:0)
  at R3Injector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:6776:0)
  at R3Injector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:6776:0)
  at R3Injector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:6776:0)
  at R3Injector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:6776:0)
  at ChainedInjector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:13855:0)
  at lookupTokenUsingModuleInjector (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:3279:0)
  at getOrCreateInjectable (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:3324:0)
  at Module.ɵɵdirectiveInject (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:10868:0)
  at NodeInjectorFactory.ModalViewActionBarC<…>

This happens on android and on ios.
The latest version of Angular 13 and @nativescript/angular 13 is working fine.

To Reproduce

• checkout the repository
• run the app with ns debug ios or ns debug android

Expected behavior

• when clicking on the button SHOW MODAL should show the modal dialog with an action bar

Sample project
https://github.com/alexander-mai/nativescript-angular14-actionbar-modal-error-example

Additional context
package-angular13.json contains a working version of the package.json with angular 13 for the project

[rob4226]

I just upgraded from Angular 13 to Angular 14 and I'm having the same issue. Where you able to figure it out?

JS: ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(ItemsModule)[ModalDialogParams -> ModalDialogParams -> ModalDialogParams -> ModalDialogParams]:
  JS:   NullInjectorError: No provider for ModalDialogParams!
  JS: NullInjectorError: R3InjectorError(ItemsModule)[ModalDialogParams -> ModalDialogParams -> ModalDialogParams -> ModalDialogParams]:
  JS:   NullInjectorError: No provider for ModalDialogParams!

[alexander-mai]

Hello @rob4226,
I haven't fixed it yet. It looks like the Dependency Injection for the ModalDialogParams in the ModalView is not working correctly.
My Apps are also converterted to Angular 14, but I can't release it, because of this bug. Everything works fine except the modal view.

[rob4226]

Hi @alexander-mai So good news, I found a way to get it working. Unfortunately, as we have discovered, injecting ModalDialogParams no longer works. Looking through the source code of recent commits I found a way to get what used to be injected. There is a new variable available on the ModalDialogService called openedModalParams. This new variable is an array that acts as a stack containing the ModalDialogParams of the currently opened modals, with the most recently opened modal's params on top (last item of array). So everywhere you have the below:

constructor(private _modalDialogParams: ModalDialogParams) {}

Replace with:

/** Need to get modal params from top of stack now that injecting doesn't work. 9/2022 */
private _modalDialogParams: ModalDialogParams;

constructor(private _modalDialogService: ModalDialogService) {}

ngOnInit() {
  // Get the most recently opened modal params (from top of stack)
  this._modalDialogParams = this._modalDialogService.openedModalParams.slice(-1)[0];
}

---

On a side note, I tried using the new NativeDialogService but it doesn't seem to be working 100% yet when using additional page-router-outlets so you can have full screen dialogs (modals) with an ActionBar.

It all almost worked on Android except when I closed the modal, it would also close whatever was behind it in the content pane of the bottom navigation tab. The only way I could get the conent in the bottom navigation to appear again was to navigate to a different bottomtab, then back again.

On iOS, it didn't work at all. I kept getting view is undefined error when I tried to open the modal.

Luckly the older style modals are still working with the above work around.

[JWiseCoder]

Are you using lazy-loading in your routes for this? I'm having a similar problem related to injector scope in page-router-outlets inside modals, and it looks like it breaks mostly with lazy-loaded modules.

[rob4226]

@JWiseCoder Yes, most of my modules are lazy loaded, and all my modals use a root component with a <page-router-outlet> so I can have an ActionBar in the modal.

[JWiseCoder]

Yes I think that's what's happening in this case: components from routes in lazy-loaded modules are not getting the right injector.

[rob4226]

Thankfully 🙏 this has been fixed per #92 Now I can remove a ton of ugly hacks! Fixed by #94