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:
Electron 5.0.2
Angular CLI 8.0.1
Node 10.16.0
macOS Mojave 10.14.5
...

ng new my-app
npm i -D electron

package.json

{
  ...
  "main": "main.js", //<-- ADDED
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "ng build --baseHref=./ && electron ." //<-- ADDED
  }
  ...
}

main.js

const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`), //<-- CHANGED
      protocol: "file:",
      slashes: true
    })
  );

  win.on("closed", () => {
    win = null;
  });
}

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

I also changed the outputPath in angular.json to just "dist"

  {
    ...
    "outputPath": "dist"
    ...
  }

started the app with npm run electron

When the app opens, I see a blank white screen. Upon inspecting, I can see the body, and the <app-root> element, but all I see on the page is a blank white screen.

When doing ng new my-app I tried both with and without routing enabled flag in CLI.

Getting these errors in the electron app console just before the Electron Security Warning:

runtime-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
styles-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
main-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
polyfills-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
vendor-es2015.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

Answer 1

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 [email protected]. You can target es2015 with that version. Tested with @angular/[email protected].

Answer 2

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