Ionic-framework: bug: setPages and insertPages do not expose proper types

[Yohandah]

Feature Request

Ionic version:


[x] 5.x

Describe the Feature Request
Hello,

I have a ion-nav in a separate section of my app (independant of the Angular routing that I'm using for the main content of my app). And I would like to INSERT a stack of pages into this ion-nav at a specified index, the functions insertPages and setPages seems perfect but lacks documentation (also see https://github.com/ionic-team/ionic-docs/issues/1478) on how to pass props to components.

Describe Preferred Solution

To push a view one by one it's :

@ViewChild("nav") nav: IonNav;

ngOnInit(): void {
  await this.nav.push(MyNewComponent, { input1: "value", input2: "value" });
}

And I would like to do something like :

@ViewChild("nav") nav: IonNav;

ngOnInit(): void {
  // Index 1
  await this.nav.insertPages(1, [
    { component: MyNewComponent, componentProps: { input1: "value", input2: "value" } },
    { component: MyNewComponent, componentProps: { input1: "value2", input2: "value2" } },
    { component: MyNewComponent, componentProps: { input1: "value2", input2: "value3" } }
  ]);
}

But this is currently not possible ... It says incompatible with type NavComponent which is ComponentRef | ViewController. So I can do the following to have 0 errors but HOW to pass componentProps as well ??

@ViewChild("nav") nav: IonNav;

ngOnInit(): void {
  // Index 1
  await this.nav.insertPages(1, [ MyNewComponent, MyNewComponent, MyNewComponent ]);
}

I would appreciate any help ...

doc : https://ionicframework.com/docs/api/nav
cross-reference : https://forum.ionicframework.com/t/how-to-use-ionnav-insertpages/192561

[liamdebeasi]

The docs are lacking on this, but can you try the following and let me know if it works:

this.nav.insertPages(1, [
  { page: MyNewComponent, params: { input1: "value", input2: "value" } },
  ...
]);

You might need to typecast the { page: .., params: ... } object as type any in order for TypeScript to not complain.

It looks like it _is_ possible, we are lacking in 1) documentation and 2) proper typings.

[Yohandah]

@liamdebeasi Thanks a LOT for taking time to help me Liam.

I have tried what you said and I have the following error. It's possible that it comes from my app so I am going to try this in a StackBlitz sandbox and see if it's better, coming back to you.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'setAttribute' of undefined
TypeError: Cannot read property 'setAttribute' of undefined
at setPageHidden (index-66edb21f.js:171)
at Nav.cleanup (ion-nav_2.entry.js:756)
at Nav.transitionFinish (ion-nav_2.entry.js:691)
at Nav.transition (ion-nav_2.entry.js:686)
at async Nav.runTransition (ion-nav_2.entry.js:518)
at resolvePromise (zone-evergreen.js:798)
at zone-evergreen.js:705
at rejected (tslib.es6.js:72)
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Object.onInvoke (core.js:41784)
at ZoneDelegate.invoke (zone-evergreen.js:363)
at Zone.run (zone-evergreen.js:123)
at zone-evergreen.js:857
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41762)

[liamdebeasi]

Thanks! I just tried it in my sample app, and I got the same error. I will look into this and come up with a solution.

[liamdebeasi]

Can you try the following dev build, and let me know if it resolves the issue?

npm i @ionic/[email protected]

[Yohandah]

@liamdebeasi I will only be able to try this out Wednesday since I'm off work this weekend and do not have access to my source code. But will do ASAP! thanks for providing a fix so quickly !

[Yohandah]

@liamdebeasi I tested it and it works ! Thank you.

I made comments on the PR : https://github.com/ionic-team/ionic-framework/pull/21725#issuecomment-658619225

Also, I don't know if it's because I am using a dev version but I wasn't able to import the type NavComponentWithProps

[liamdebeasi]

Glad it works! Ah right I forgot to export NavComponentWithProps. I will make sure that gets updated in my PR.

[liamdebeasi]

Ok I made a few changes:

1. NavComponentsWithProps should now be importable.
2. I changed page to component and params to componentProps to match the other methods.

Here is a dev build if you would like to test: 5.3.0-dev.202007151542.a519bd4. Once the tests pass on the PR, we should be good to merge. Thanks!

[Yohandah]

@liamdebeasi Nice thanks! Did you make the same changes to .setPages as well ? 😅😅 I might have to use it too

[liamdebeasi]

Fixed setPages as well - thanks 👍

[liamdebeasi]

Thanks for the issue. This has been resolved via #21725, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.