Stencil: this.history is undefined with injectHistory

[sh-a-v]

Resources:
https://stenciljs.com/docs/router-tutorials#inject-history-into-a-deep-component

Stencil version::

@stencil/[email protected]

I'm submitting a ...
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
this.history is undefined in a deep component

Expected behavior:
this.history is not undefined

Steps to reproduce:
All steps from https://stenciljs.com/docs/router-tutorials#inject-history-into-a-deep-component

[sh-a-v]

https://github.com/ionic-team/stencil-router/issues/79

[threeaccents]

Any updates on this? Having the same issue.

[numerized]

Hello guys, same issue, a bit blocking, had to hack to bypass this and it's not even a proper UX.

[sfmskywalker]

@numerized can you please share your workaround? I'm blocked by this as well :(

[sfmskywalker]

Never mind me - my component wasn't wrapped within <stencil-router> 😅

[sfmskywalker]

It appears that history will only be set on components that are selected inside the <stencil-route-switch> component. For example, if I have a URL /my-page-component matching my-page-component, history will be available. But any other component outside of that component won't have its history prop set.

This poses a challenge for me, because I have a layout component that has a left-menu component that sits outside my page components (which themselves are wrapped by <stencil-route-switch>.

[sfmskywalker]

Not even rendering a <stencil-route-redirect> component works when being rendered from a component outside of <stencil-route-switch>. Is this by design? Any chance we can make routing work from components that are outside of <stencil-route-switch>? 🤔

[sfmskywalker]

Turns out there's already a feature request for this here: https://github.com/ionic-team/stencil-router/issues/99

[sfmskywalker]

I was able to work around my issue as follows: https://github.com/ionic-team/stencil-router/issues/99#issuecomment-520242489