Angular Electron, white screen after reload page

时间秒杀一切 提交于 2021-02-07 09:14:21

问题


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

but once I reload the page all becomes white

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 ?


回答1:


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.

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:

Step 1: change the <base href="/"> in index.html

  1. Change to: <base href=""> or <base href="index.html">

Step 2: For routing to work, switch to hash location strategy in angular

  1. Option 1: app.module.ts
providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }
]
  1. Option 2: RouterModule.forRoot(routes, { useHash: true })

Step 3: for navigation routes when you open a new window, remember to append the # in Electron.

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

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




回答2:


we can prevent by reload issue by 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);
 }


来源:https://stackoverflow.com/questions/46917738/angular-electron-white-screen-after-reload-page

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!