Angular Electron, white screen after reload page

问题

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`

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

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

Option 1: app.module.ts

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

Option 2: RouterModule.forRoot(routes, { useHash: true })

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

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

标签

angular