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

Question

当我第一次使用Angular 4运行我的Electron应用程序时，它可以正常工作，就像这样。但是一旦我重新加载页面，所有内容都变成了白色。

当我检查DOM时，一切似乎正常，但屏幕仍然是白色的，就像这样。这是什么原因造成的？我该如何解决？

- hgadjan

---

{btsdaf} - kontrollanten

Thank for your quick answer, - hgadjan

{btsdaf} - hgadjan

我遇到了相同的问题，并找到了这个简单的更改，它有效可行。https://github.com/maximegris/angular-electron/issues/15 - Marco Simoes

Answer 1

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

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

这个问题跟在Angular中启用HTML5路由（没有哈希#）有关。如果Electron刷新，它将尝试运行像这样的URL：file://local-filesystem-project-location-without-index-html/{angular-route}，而文件系统中不存在它。你需要"强制"在URL中加载(包含) index.html部分。

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

步骤1：更改index.html中的<base href="/"> 1. 更改为：<base href="">或<base href="index.html"> 步骤2：为了使路由正常工作，在Angular中切换到哈希位置策略

1. 选项1：app.module.ts

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

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

第三步：在 Electron 中打开新窗口时，请记得添加#以进行导航路由。

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

这对我有用...希望能帮助面临相同问题的人。

- Edwin Beltran

---

这在开发中对我有效，但在 Windows 构建后，这种方法不起作用，window.location.href 指向 D:/Code/TimerlyApp/release-builds/timerly-desktop-win-win32-ia32/resources/app.asar/#/。 - Imran Iqbal

我真的不喜欢我的路由中有这个 # :( - Leonardo Rick

Answer 2

我在 github 上找到了这个主题的解决方案。

您需要添加以下代码：win.webContents.on('did-fail-load', () => win.loadURL(...));@mariotaku

因此，当您的应用程序未找到正确的路由时，它将重新加载整个应用程序。

错误的解释

当您重新加载应用程序时，electron 不知道要加载什么内容，因此它会尝试加载您当前的路由，例如 /home，但现在已经找不到了。订阅 did-fail-load 事件将使您的应用程序重启，并加载正确的 URL，从而找到正确的文件以进行加载。

- Raphaël Balet

---

这个建议对我很有帮助。现在我的函数看起来像这样：function loadnow(win) { win.loadURL(isDev ? 'http://localhost:3000' : \file://${path.join(__dirname, '../dist/index.html')}`); }我只需要在createWindow中调用它，还有在'did-fail-load'` 中也要调用。 - Zachary Vander Klippe

对我来说也解决了问题，而且没有给现有代码增加太多复杂性。 - Deep Panda

Answer 3

我们可以通过全局快捷键来防止重新加载问题

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

- Atchutha rama reddy Karri

---

这将导致其他应用程序的快捷方式也停止工作。 - Alan