web-dev-qa-db-ja.com

フレッシュニューの白い画面Angular 8 / Electron 5 App

Angular 8/Electron 5デスクトップアプリを構築して実行しています。適切に設定されていると思われるものの後に、アプリを実行すると、空白の白い画面が表示されます。

使用：
Electron 5.0.2
Angular 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();
  }
});

angular.jsonのoutputPathも「dist」に変更しました

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

npm run electronでアプリを開始しました

アプリを開くと、空白の画面が表示されます。検査すると、本文と<app-root>要素が表示されますが、ページに表示されるのは空白の白い画面だけです。

ng new my-appを実行するとき、CLIでルーティング有効化フラグありとなしの両方を試しました。

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.
angularelectron
10
Ticdoc

tsconfig.jsonのtargetをes5に変更して、electronアプリケーションを動作させました。

{
  "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日更新：

これは[email protected]で修正されたようです。そのバージョンでes2015をターゲティングできます。 @angular/[email protected]でテスト済み。

23
R. Richards

エラーはスクリプト要素のtype = "module"属性に原因があるようです。少なくともこれが私が見つけた主な違いです。

これを修正するには、Electronコンテキストにes2015ファイルのみを生成する別のオプションがあります（結果として、スクリプトが小さくなり、場合によってはより高速になります）。

以下に基づいて、すべてes2015をサポートするブラウザーでBrowserslistを設定することにより、それを実現できます。 Angular-cli 8-es2015でのみビルドすることは可能ですか？

Electronのコンテキストでは、ブラウザリストをElectronのバージョンに設定するのが最適です。

 "browserslist": [
    "Electron 5.0.1"
  ],

これは私にとってはうまくいきました、そしてこれはes5にダウングレードするよりも少し良いかもしれないと思います。まあ、少なくともelectronが唯一のターゲットである場合、Webバージョンでアプリをリリースする（またはElectronとWebに異なるビルドを構成する）場合は、es5にダウングレードする方が安全です。

4
Luc Boutier