web-dev-qa-db-fra.com

Écran blanc sur une toute nouvelle Angular 8 / Electron 5 App

Je crée et exécute une application de bureau Angular 8/Electron 5. Après ce que je pense être une configuration correcte, l'exécution de l'application affiche un écran blanc vierge.

En utilisant:
Electron 5.0.2
CLI angulaire 8.0.1
Noeud 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();
  }
});

J'ai également changé le outputPath dans angular.json en juste "dist"

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

a lancé l'application avec npm run electron

Lorsque l'application s'ouvre, je vois un écran blanc vierge. Après inspection, je peux voir le corps et le <app-root> élément, mais tout ce que je vois sur la page est un écran blanc vierge.

En faisant ng new my-app J'ai essayé les deux avec et sans indicateur de routage activé dans CLI.

Obtenir ces erreurs dans la console de l'application electron juste avant l'avertissement de sécurité électronique:

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

J'ai fait fonctionner mon application d'électrons en changeant le target dans le tsconfig.json en 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"
    ]
  }
}

Avant cela, je recevais également l'écran vide (blanc) après la mise à jour de Angular 8. Il semble maintenant que Angular effectue une construction dans les deux es5 et es2015, électron n'aime pas ça. Je suppose que cela sera corrigé à l'avenir.

MISE À JOUR 2019-10-24:

On dirait que cela a été corrigé dans [email protected]. Vous pouvez cibler es2015 avec cette version. Testé avec @angular/[email protected].

23
R. Richards

L'erreur semble être causée aux attributs type = "module" sur les éléments de scripts, au moins c'est la principale différence que j'ai trouvée.

Pour le corriger, il existe une autre option dans le contexte Electron qui serait de générer uniquement le fichier es2015 (résultant en un script plus petit et potentiellement plus rapide).

Sur la base des éléments suivants, vous pouvez y parvenir en définissant une liste de navigateurs avec des navigateurs qui prennent tous en charge es2015. Angular-cli 8 - Est-il possible de construire uniquement sur es2015?

Dans le contexte électronique, le mieux est de définir la liste des navigateurs sur votre version électronique:

 "browserslist": [
    "Electron 5.0.1"
  ],

Cela a fonctionné pour moi et je suppose que cela peut être un peu mieux que la rétrogradation vers es5. Eh bien au moins si Electron est la seule cible, il peut être plus sûr de passer à es5 si vous prévoyez de publier votre application sur une version Web également (ou de configurer différentes versions pour Electron et Web).

4
Luc Boutier