时间戳

首页 > 解决方案 > 全新 Angular 8/Electron 5 应用程序出现白屏

angular - 全新 Angular 8/Electron 5 应用程序出现白屏

问题描述

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

使用：
电子 5.0.2
Angular CLI 8.0.1
节点 10.16.0
macOS Mojave 10.14.5
...

ng new my-app
npm i -D electron

包.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();
  }
});

我还将angular.json中的 outputPath 更改为“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.

标签： angularelectron

解决方案

我通过将tsconfig.jsontarget中的更改为.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电子不喜欢那样。我想这将在未来得到解决。

2019 年 10 月 24 日更新：

看起来这是固定的electron@7.0.0。您可以es2015使用该版本进行定位。经测试@angular/cli@8.3.14。

推荐阅读