Белый экран на свежем новом приложении Angular 8 / Electron 5

Question

Я собираю и запускаю настольное приложение Angular 8 / Electron 5. После того, что я считаю правильной настройкой, при запуске приложения отображается пустой белый экран.

Использование:
Электрон 5.0.2
Угловой CLI 8.0.1
Узел 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();
  }
});

Я также изменил outputPath в angular.json на просто "dist"

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

запустил приложение с npm run electron

Когда приложение открывается, я вижу пустой белый экран. После осмотра я вижу тело и элемент <app-root>, но все, что я вижу на странице, это пустой белый экран.

При выполнении ng new my-app я пробовал оба с и без флаг включенной маршрутизации в CLI.

Получение этих ошибок в консоли электронного приложения перед электронным предупреждением безопасности:

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

Я заставил свое электронное приложение работать, изменив target в tsconfig.json на 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"
    ]
  }
}

До этого я получал пустой (белый) экран после обновления Angular 8. Теперь кажется, что Angular выполняет компоновку как es5, так и es2015, электрону это не нравится. Я предполагаю, что это будет исправлено в будущем.

Answer 2

Кажется, ошибка вызвана атрибутами type = "module" в элементах scripts, по крайней мере, это основное отличие, которое я обнаружил.

Чтобы исправить это, есть еще один вариант в контексте Electron, который будет генерировать только файл es2015 (что приведет к уменьшению размера и потенциально более быстрому сценарию).

Исходя из следующего, вы можете добиться этого, настроив список браузеров с браузерами, которые все поддерживают es2015. Angular-cli 8 - возможно ли построить только на es2015?

В электронном контексте лучше всего настроить список браузеров для вашей электронной версии:

 "browserslist": [
    "Electron 5.0.1"
  ],

Это сработало для меня, и я думаю, что это может быть немного лучше, чем понижение до es5. По крайней мере, если электрон является единственной целью, может быть более безопасным понизить версию до es5, если вы планируете выпустить свое приложение также в веб-версии (или настроить различные сборки для электрона и сети).