White page when using ion-router with stencil and electron-CodePudding

I have the default stencil "ionic-pwa" app which i am trying to run in electron, but can't get it to work properly (or at all).

When using ion-router, ion-nav never loads any content so my page stays white.

When i add any div into my render with some text it shows up, so i think that electron loads correctly (as there are no errors in the console - but who knows).

The app-root.tsx

import { Component, h } from '@stencil/core';


@Component({
  tag: 'app-root',
  styleUrl: 'app-root.css',
  shadow: true
})
export class AppRoot {

  routeWillChange($event) {
    console.warn($event);
  }

  render() {
    return [
      // <div>test</div> <-- this shows up when uncommented
      <ion-app>
        <ion-router useHash={false} onIonRouteWillChange={$event => this.routeWillChange($event)} onIonRouteDidChange={$event => this.routeWillChange($event)}>
          <ion-route url='/' component='app-home'  />
          <ion-route-redirect from='*' to='/' />
          <ion-nav />
        </ion-router>
      </ion-app>
    ];
  }
}

How to fix this?

CodePudding user response：

(This might not be totally correct, but for the sake of understanding:) For anyone who stumbles over this, according to https://www.npmjs.com/package/electron-serve this issue exists, because the router pushes routing states via https://developer.mozilla.org/en-US/docs/Web/API/History_API which won't work with electron, depending on the state pushed.

electron-serve intercepts this and solves this issue by "loading back" to the main module.

So what i did was simply install electron-serve and modify my main module a little.

const serve   = require('electron-serve');
const loadURL = serve({
  directory: path.join(__dirname, 'www')
});

const { BrowserWindow} = require('electron');

let win;

function createWindow () {
  win = new BrowserWindow({
    width: 800,
    height: 600
  });

  loadURL(win);
}

// ...