Angular Electron, white screen after reload page

Question

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 ?

Answer 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
    }
]

2. 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.

Answer 2

I found a solution on this topic on github

You have to add win.webContents.on('did-fail-load', () => win.loadURL(...)); @mariotaku

So when your app does not found the right route, it will reload your entire app.

Explanation of the bug

When you do reload your app, electron does not know what to load, so he try to load your actual route, which could be /home and can not find it anymore. Subscribing to a did-fail-load will make your app restart, with the correct url, which will find the right file to load.