White Screen on Fresh New Angular 8/Electron 5 App

Question

I am building and running an Angular 8/Electron 5 desktop app. After what I believe to be proper setup, running the app displays a blank white screen.

Using:
Electr

Answer 1

The error seems to be caused to the type="module" attributes on the scripts elements, at least this is the main difference I found.

To fix it there is another option in Electron context which would be to generate only the es2015 file (resulting in smaller and potentially faster script).

Based on the following you can achieve that by setting a Browserslist with browsers that all support es2015. Angular-cli 8 - Is it possible to build only on es2015?

In electron context the best is to set the browser list to your electron version:

 "browserslist": [
    "Electron 5.0.1"
  ],

This worked for me and I guess this may be a bit better than downgrading to es5. Well at least if electron is the only target, it may be safer to downgrade to es5 if you plan to release your app on a web version also (or configure different builds for electron and web).

Answer 2

I got my electron application to work by changing the target in the tsconfig.json to es5.

{
  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5", <-- HERE
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Prior to this, I was getting the blank (white) screen too after updating the Angular 8. Seems now that Angular does a build in both es5 and es2015, electron doesn't like that. I would guess this will be fixed in the future.

UPDATE 2019-10-24:

Looks like this was fixed in electron@7.0.0. You can target es2015 with that version. Tested with @angular/cli@8.3.14.