web-dev-qa-db-fra.com

Electron - Interdit de charger une ressource locale

Soir,
Je cherche à utiliser electron pour empaqueter une construction angular2 existante. Je pensais avoir un bon fonctionnement, mais l'emballage actuel semble être défaillant (voir la dernière étape ci-dessous) et je veux comprendre pourquoi. Voici ce que je fais ...

Créer un projet
Utilisez angular-cli _ pour démarrer un nouveau projet ng new electron-ng2-cli --style=scss

Installez electron et constructeur d'électrons

Editer package.json
Faites les ajouts suivants ...
"main": "main.js"

"build":
{
  "appId": "com.electrontest.testapp",
  "mac": {
    "category": "your.app.category.type"
  }
}

et ajoutez ce qui suit à la scripts...

"pack": "build --dir",
"dist": "build",
"electron": "electron main.js",
"postinstall": "install-app-deps"

Créer main.js
Je viens de copier le code du démarrage rapide électronique . La seule modification apportée concerne l'emplacement de index.html que j'ai défini sur /dist/index.html

Modifier la base
Dans index.html, changez <base="/"> en <base="./"> 

Code du pack
Exécutez ng build. Cela met tout le code empaqueté dans /dist

Essai
Exécutez npm run electron. Cela fonctionne bien. Une application Electron se déclenche et je vois les trucs angulaires qui y courent.

Créer une application pour la distribution
Exécutez npm run pack pour créer une application packagée. L'emballage semble aller bien - je reçois un avertissement à propos d'une icône manquante et un avertissement que mon code n'est pas signé mais je suppose qu'ils ne devraient pas être mortels?
Le problème est que, lorsque je lance maintenant l'application en double-cliquant sur Finder, je reçois une erreur dans la console en disant: Not allowed to load local resource: file:///Users/<username>/Documents/development/electron-ng2-cli/dist/mac/electron-ng2-cli.app/Contents/Resources/app.asar/dist/index.html

Alors, est-ce que quelqu'un peut expliquer ce qui est différent entre l'application packagée qui échoue et celle qui fonctionne correctement lorsque j'utilise npm run electron?

Que puis-je faire pour résoudre ce problème et que l'application fonctionne correctement?

Merci d'avoir réussi jusqu'à la fin. Cela a pris plus de temps que je ne le voulais mais j'espère que je me suis bien expliqué. Si vous pouvez aider ou donner des conseils qui seraient formidables - beaucoup de bonnes vibrations seront pensées dans votre direction générale :)

Salut à tous

angularelectronangular-clielectron-builder
9
popClingwrap

Il a fallu beaucoup d'essais et d'erreurs, mais j'ai réussi à faire fonctionner cela. Il y a beaucoup de choses que je ne comprends pas tout à fait, et beaucoup qui pourraient être inutiles ou mauvaises, et tout pourrait tomber à la prochaine étape, mais si, comme moi, vous essayez simplement de surmonter la première bosse, alors Peut-être que quelque chose que j'ai trouvé vous aidera.

J'ai trouvé le problème en décompactant le fichier app.asar produit par electron-builder. Au lieu de contenir le code fourni de mon dossier dist, il contenait tout le code du projet (*.ts *.scss etc.). Le problème était simplement que les fonctions d'emballage préparaient le mauvais matériel.
Les étapes pour obtenir la bonne source dans l'application finale sont simples lorsque vous les exposez, mais mon dieu, ils n'ont pas à moitié combattu! Partant de là où je me suis arrêté dans ma question initiale, j'ai fait ce qui suit ...

N'oubliez pas que ma structure de projet est celle par défaut définie par angular-cli}

Fichiers spécifiques à l'électron
J'ai déplacé le main.js dans src et changé son nom en electron-main.js juste pour éviter toute confusion avec le main.ts déjà présent. J'ai également changé le chemin auquel il fait référence en /index.html.
Ensuite, j'ai créé un nouveau niveau d'application package.json également dans src et lui ai donné le contenu suivant:

 {
  "name": "application-name",
  "description": "CLI app",
  "author": "Me me me",
  "version": "0.0.1",
  "main": "electron-main.js"
}

angular-cli.json
J'ai changé le outDir en build uniquement parce que électron semble produire le résultat en dist par défaut et je voulais une séparation à ce stade. Ensuite, j'ai ajouté package.json et electron-main.js au tableau assets.

Main package.json
J'ai enlevé le "main":"main.js" car il n'est apparemment plus nécessaire ici. Dans scripts, j'ai modifié la commande de test en electron build pour qu'elle pointe vers le dossier de construction où se trouve le code fourni.
Enfin, je suis allé dans le champ build et j'ai ajouté le contenu suivant:

"directories": {
  "buildResources": "build",
  "app": "build"
}

Cela semble assez évident maintenant. Cela indique simplement au compilateur où rechercher les actifs qui constitueront l'application finale. Il s'agissait par défaut du répertoire de travail et c'était mon problème.

Avec cette configuration, je peux maintenant exécuter ng build pour regrouper mon projet dans le dossier build avec les electron-main.js et package.json.
Cela fait, je peux exécuter npm run electron pour lancer rapidement une application de test ou npm run pack pour créer une application pouvant être lancée à partir de Finder.

Boom. Travail accompli. Je serai de retour dans 10 minutes avec une autre question ennuyeuse que je m'attends. Je dois aimer le dev ces jours-ci :)

12
popClingwrap

Le problème peut être le chemin invalide dans main.js, corrigez-le si nécessaire

 enter image description here

17
WasiF

Au cas où cela aiderait quelqu'un, le problème que j'avais était que j'avais le chemin défini avec process.cwd () :

win.loadURL(`file://${process.cwd()}/dist/index.html`);

Ce qui, une fois empaqueté, n’est pas correct car le fichier main.js n’est plus à la racine. Passage à __dirname :

win.loadURL(`file://${__dirname}/dist/index.html`);

Correction du problème pour moi.

0
Zaptree