新鲜的新Angular 8/Electron 5 App上的白色屏幕

问题描述

我正在构建和运行Angular 8/Electron 5桌面应用程序.我认为安装正确之后，运行该应用程序将显示白屏.

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.

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

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

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

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

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

使用npm run electron

打开应用程序后，我看到了空白的空白屏幕.检查后，我可以看到主体和<app-root>元素，但是我在页面上看到的只是空白的空白屏幕.

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.

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

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.

推荐答案

通过将 tsconfig.json 中的target更改为es5，我的电子应用程序开始工作.

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"
    ]
  }
}

在此之前，更新Angular 8后，我也获得了黑屏(白屏).现在看来Angular在es5和es2015中都建立了电子，电子不喜欢这样.我想这会在将来解决.

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.

更新2019-10-24:

类似的内容已在electron@7.0.0中修复.您可以使用该版本定位es2015.经过@angular/cli@8.3.14测试.

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

这篇关于新鲜的新Angular 8/Electron 5 App上的白色屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！