Angular Electron，重新加载页面后出现白屏

Question

当我第一次使用 angular 4 运行我的应用程序电子时，它可以正常工作 like this

但是一旦我重新加载页面全部变成白色

当我检查 DOM 时，一切正常，但屏幕仍然是白色的。 like this

什么原因导致问题，我该如何解决？

Answer 1

我们可以通过 globalShortcut 重新加载问题来防止

import { app, BrowserWindow,globalShortcut } from 'electron';

app.on('ready', async () => {
  if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true') {
    await installExtensions();
  }
  globalShortcut.register('CommandOrControl+R', () => false);
  globalShortcut.register('F5', () => false);
 }

Answer 2

我知道这已经很老了……但这是我能找到的最直接的问题。

我遇到了同样的问题；对我的 Angular 应用程序的每一次更改都需要我重新构建整个电子应用程序，如果我刷新电子应用程序，则会出现一个空白屏幕。

与启用 Angular 中的 html5 路由（无哈希 #）时有关的问题。如果 Electron 刷新，它将尝试运行这样的 URL：file://local-filesystem-project-location-without-index-html/{angular-route}，并且文件系统中不存在该 URL。您需要“强制”在 URL 中加载（包括）index.html 部分。

我相信还有其他方法，但我就是这样做的：

第一步：将<base href="/">改成index.html

1. 更改为：<base href=""> or <base href="index.html">

第 2 步：为了让路由正常工作，请切换到 Angular 中的哈希定位策略

1. 选项 1：app.module.ts

providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }
]

1. 选项 2：RouterModule.forRoot(routes, { useHash: true })

第 3 步：对于打开新窗口时的导航路线，请记住在 Electron 中附加 #。

1. 示例：mainWindow.loadURL("file:///index.html#/my-route")

这对我有用...希望它可以帮助面临同样问题的人。

Answer 3

我在github找到了关于这个话题的解决方案

你必须添加 win.webContents.on('did-fail-load', () => win.loadURL(...)); @mariotaku

所以当你的应用没有找到正确的路径时，它会重新加载你的整个应用。

错误说明

当你重新加载你的应用程序时，electron 不知道要加载什么，所以他尝试加载你的实际路线，可能是/home，但再也找不到了。订阅did-fail-load 将使您的应用重新启动，并使用正确的 url，这将找到要加载的正确文件。