Angular Electron，重载页面后的白色屏幕

Question

当我第一次用角度4运行我的应用电子时，它正常工作 like this

但是一旦我重新加载页面，一切都变白了

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

导致问题的原因是，如何解决？

Answer 1

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

我正在经历同样的问题；对我的角度应用程序所做的每一次更改都要求我重建整个电子应用程序，如果刷新，电子应用程序将显示空白屏幕。

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

我肯定还有其他方法，但这就是我的方法：

步骤1：更改<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：打开新窗口时的导航路线，请记住在电子中附加#。

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

这对我有用...希望它可以帮助遇到相同问题的人。

Answer 2

我们可以通过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 3

我在 github

上找到了有关此主题的解决方案

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

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

错误说明

当您重新加载您的应用程序时，电子不知道要加载什么，因此他会尝试加载您的实际路线，该路线可能是 /home 并且再也找不到了。订阅 did-fail-load 将使您的应用重新启动，并使用正确的网址，从而找到要加载的正确文件。