角电子，重新加载页面后出现白屏 [英] Angular Electron, white screen after reload page

问题描述

当我第一次以4号角运行应用电子时，它可以正常工作像这样

When I first run my application electron with angular 4, it works normally like this

但是一旦我重新加载页面，所有页面都会变成白色

but once I reload the page all becomes white

当我检查DOM时，一切看起来都很正常，但是屏幕仍然是白色的.像这样

When I check the DOM, everything appears normal, but the screen is still white. like this

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

What causes the problem, how do I fix it ?

推荐答案

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

I know this is pretty old... but this is the most direct question I could find.

我正在经历同样的问题；对我的角度应用程序所做的每一次更改都要求我重建整个电子应用程序，并且如果我刷新电子应用程序，则会得到一个空白屏幕.

I was running thru the same issue; every change to my angular application required me to rebuild the entire electron app, and if I refreshed the electron app was getting an empty screen.

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

The issue it is related to when the html5 routing (no hash #) in angular is enabled. If Electron refreshes, it will try to run an URL like this: file://local-filesystem-project-location-without-index-html/{angular-route} and that doesn't exist in the file system. You need to "force" to load (include) the index.html part in the URL.

我敢肯定还有其他方法，但这是我做到的方式:

I am sure there are other ways, but this is how I did it:

1. 更改为:< base href =">或< 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")

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

This worked for me... hopefully it can help someone facing the same issue.

这篇关于角电子，重新加载页面后出现白屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！