使用带有模板和电子的离子路由器时的白页

Question

我有默认的模板“ionic-pwa”应用程序，我正在尝试运行在 electron 中，但无法使其正常工作（或根本无法正常工作）。

使用 ion-router 时，ion-nav 从不加载任何内容，因此我的页面保持白色。

当我将任何 div 添加到我的渲染中时，它会显示一些文本，所以我认为电子加载正确（因为控制台中没有错误 - 但谁知道）。

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>
    ];
  }
}

如何解决这个问题？

Answer 1

（这可能不完全正确，但为了便于理解：）根据 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，对于任何偶然发现此问题的人，它不适用于电子，具体取决于推送的状态。

electron-serve 拦截了这个并通过“加载回”主模块解决了这个问题。

所以我所做的只是安装 electron-serve 并稍微修改我的主模块。

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);
}

// ...

使用带有模板和电子的离子路由器时的白页

White page when using ion-router with stencil and electron

ionic-framework

electron

stenciljs