this.history is undefined with injectHistory

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

Stencil version::

@stencil/core@0.15.2

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

[FabianEbert]

I could not reproduce the issue on my side with stencil-router 1.0.1.

I needed to navigate programmatically in some component of my application which is not rendered by a stencil-route and followed this wiki article. To have the history() property defined, you need to additionally inject the history, the wiki article was not complete here.

So my full components looks like this now:

import { RouterHistory, injectHistory } from '@stencil/router'; // version 1.0.1

export class MyComponent {
  @Prop() history: RouterHistory;
  
  @Listen('my-custom-event')
  handleMyCustomEvent(event: CustomEvent) {
    this.history.push(event.detail.route, {});
  }
}

injectHistory(MyComponent);

[carbonfish]

Still not working