全新的Angular 8/Electron 5应用程序出现白屏问题

Question

我正在构建和运行一个Angular 8 / Electron 5桌面应用程序。在我认为已经正确设置之后，运行该应用程序会显示一个空白的白屏。

使用:
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
  }
  ...
}

主程序.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();
  }
});

我还在angular.json中将outputPath更改为"dist"

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

使用npm run electron启动应用程序。

当应用程序打开时，我看到一个空白的白屏。经检查，我可以看到文档主体和<app-root>元素，但是页面上只有一个空白的白屏。

在CLI中执行ng new my-app时，我尝试了启用和禁用路由标志。

在Electron应用程序控制台中，在Electron安全警告之前出现以下错误：

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.

- Ticdoc

Answer 1

通过将tsconfig.json中的target更改为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中同时构建，但electron不喜欢这样。我猜想这将来会得到修复。

更新于2019-10-24:

看起来在electron@7.0.0中已经修复了这个问题。您可以使用该版本针对es2015进行目标定向。已测试通过@angular/cli@8.3.14。

- R. Richards

---

你帮我解决了同样的问题！但在我的情况下，需要将 'target' 更改为 _'es2017'_。无论如何，非常感谢！ - Mikhail Petrov

Answer 2

错误似乎是由脚本元素的type="module"属性引起的，至少这是我发现的主要区别。

为了解决这个问题，在Electron上下文中还有另一种选项，就是只生成es2015文件（从而得到更小、潜在更快的脚本）。

根据以下提示，您可以通过设置支持es2015的所有浏览器的Browserslist来实现这一点。 Angular-cli 8 - Is it possible to build only on es2015? 在electron上下文中，最好将浏览器列表设置为您的Electron版本。

 "browserslist": [
    "Electron 5.0.1"
  ],

这对我有用，我想比降级到es5更好。至少如果electron是唯一的目标，则可能更安全地将其降级为es5，如果您计划在web版本上发布应用程序（或为electron和web配置不同的构建），则需要这样做。

- Luc Boutier

---

我应该在哪个文件中添加 "browserslist": ["Electron 5.0.1"] ? - hsantos

将其添加到您的 package.json 文件中。在此情况下，请确保删除您的 browserslist 文件，否则构建时可能会出现错误。请注意，您还可以更加宽松，例如 "Electron >= 4.0"，这似乎也足以仅获得 ES2015 编译。 - seairth