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

Posted 2023-02-22

【中文标题】Angular Electron，重新加载页面后出现白屏

【英文标题】：Angular Electron, white screen after reload page

【发布时间】：2018-04-05 16:14:32

【问题描述】：

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

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

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

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

【问题讨论】：

您是否在控制台日志中收到任何错误？

感谢您的快速回答，

控制台没有错误，一切正常。我什至可以检查 DOM 的元素，但在界面上什么都没有

我遇到了同样的问题，发现这个简单的更改并且有效。 https://github.com/maximegris/angular-electron/issues/15

【参考方案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);
 

【参考方案2】：

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

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

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

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

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

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

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

选项 1：app.module.ts

providers: [
    
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    
]

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

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

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

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

【讨论】：

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

我真的不喜欢我的路线上的这个#:(

【参考方案3】：

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

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

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

错误说明

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

【讨论】：

这个建议为我解决了。我现在有一个像 function loadnow(win) win.loadURL(isDev ? 'http://localhost:3000' : `file://$path.join(__dirname, '../dist/index.html')`); 这样的函数，我只是在 createWindow 和 'did-fail-load'

中调用它