stencil-router with cordova

[jpgilchrist]

I was trying to get stenciljs and cordova to work together. I ran into some issues and one of which was how stencil-router works with routes on cordova.

On a page in a cordova app you'll have something like:

JSON.stringify(window.location)

"{"href":"file:///android_asset/www/index.html","ancestorOrigins":{},"origin":"file://","protocol":"file:","host":"","hostname":"","port":"","pathname":"/android_asset/www/index.html","search":"","hash":""}"

If I change the route to something like:

<stencil-route url='*' component='app-home' exact={true}>

Then the app-home component just works, but that's where it stops. I was wondering/hoping it would be possible to use stencil/stencil-router with cordova applications.

[jpgilchrist]

FYI I have a project demo up here:

https://github.com/jpgilchrist/stencil-cordova

Note: you'll want to build the www/ directory with ./node_modules/.bin/stencil build --dev since running npm run build uses prod/prerender configuration which causes other problems (for which I'll be opening a ticket in stenciljs repo)

[jthoms1]

Thanks for creating this. We want this to work in Cordova and with file based routes. I will work on a fix for this.

[jgw96]

Hello @jpgilchrist , this routing issue has been fixed with the latest version of the router. We added hash routing which works on cordova. To turn on hash routing you can add this property historyType='hash' to your stencil-router component. Thanks for using Stencil!

[jpgilchrist]

Nice! Thanks! 👍

[sliteleemadd]

Hey, completely new to StencilJS where is the stencil-router file located. I'm assuming it's in the node_modules folder after I run 'npm install' for stencil-router on my ionic project. Trying to get the StencilJS Virtual Scroll working with Ionic 3 on Cordova. The downloaded starter project is working from 'ionic serve' but not in Cordova. I'm hoping that historyType='hash' is the solution but have no idea where this attribute should be placed.

[jpgilchrist]

@sliteleemadd this type of question is probably best for SO, but if you look at the example github project I created for the purpose of reproducing this issue, then you'll see a

<stencil-router ...>
  ...
</stencil-router>

in this file: https://github.com/jpgilchrist/stencil-cordova/blob/master/src/components/my-app/my-app.tsx

I have not verified it works yet as I haven't had the time, but theoretically you should add that historyType='hash' to that stencil-router, i.e.,

<stencil-router historyType='hash'>
  ...
</stencil-router>

[quanganh206]

I try to test with historyType yet, but confirm it doesn't work.