Électron - Pas autorisés à charger des ressources locales

Soir,

Je suis à la recherche dans l'aide de electron pour emballer une angular2 construire. Je pensais que j'avais un fonctionnement à sec de travail, mais l'emballage lui-même semble être en défaut (voir l'étape finale ci-dessous) et je veux comprendre pourquoi. Voici ce que je suis en train de faire...

Créer Un Projet

Utilisation angulaires-cli pour démarrer un nouveau projet ng new electron-ng2-cli --style=scss

Installer des électrons et des électron-builder

Modifier le package.json
Faire les ajouts suivants...

"main": "main.js"

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

et ajoutez les lignes suivantes à la scripts...

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

Créer main.js
j'ai juste copié le code de la d'électrons de démarrage rapide. Le seul changement que j'ai fait est à l'emplacement de index.html que j'ai mis à /dist/index.html

Modifier la base de
index.html changement <base="/"> à <base="./">

Code Pack
Exécuter ng build. Cela met tous emballés code dans /dist

Essai
Exécuter npm run electron. Cela fonctionne très bien. Un Électron d'application des feux et je vois l'angle de trucs en cours d'exécution à l'intérieur.

Créer App Pour la Distribution
Exécuter npm run pack pour créer un emballés app. L'emballage semble aller ok - je reçois un avertissement au sujet d'un manque icône et un message d'avertissement que mon code n'est pas signé, mais je devine qu'ils ne devraient pas être mortel?

Le problème est que quand je vais maintenant lancer l'application en double-cliquant dans Finder j'obtiens 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

Donc, quelqu'un peut-il expliquer ce qui est différent entre le emballés application qui échoue et l'un qui fonctionne ok lorsque j'utilise npm run electron?

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

Merci de l'avoir fait à la fin. Cela fait plus longtemps que je voulais, mais j'espère que j'ai expliqué moi ok. Si vous pouvez aider ou donner des pointeurs, ce serait super - beaucoup de bonnes vibes sera pensée dans votre direction 🙂

Acclamations de tous les

InformationsquelleAutor popClingwrap | 2016-12-13

22

Problème est peut-être le chemin d'accès non valide dans main.js, les corriger si nécessaire

InformationsquelleAutor WasiF
12

Il a fallu beaucoup d'essais et d'erreurs, mais j'ai obtenu ce travail. Il y a beaucoup de choses ici que je ne comprend pas tout à fait, et beaucoup qui pourrait être inutile ou une mauvaise pratique et il peut tous tomber à la prochaine étape, mais si, comme moi, vous êtes juste essayer d'obtenir sur la première bosse, alors peut-être quelque chose que j'ai trouvé va vous aider.

J'ai trouvé le problème par déballage la app.asar fichier electron-builder produit. Au lieu de contenir le logiciel de code de mon dist dossier, il contient tout le code du projet (*.ts *.scss etc). Le problème était juste que l'emballage des fonctions ont été à l'emballage des mauvais trucs.
Les étapes pour obtenir le droit de la source dans le final de l'application sont simples lorsque vous les poser, mais mon dieu qu'ils n'ont pas la moitié de mettre en place un combat! À partir de là où j'ai laissé dans ma question initiale, je n'ai la suite...

Souviens que ma structure de projet est la valeur par défaut définie par angulaires-cli

Électrons des fichiers spécifiques
j'ai déplacé le main.js vers le bas dans src et a changé son nom à electron-main.js juste pour arrêter toute confusion avec le main.ts qui est déjà là. J'ai aussi changé le chemin références de /index.html.
Ensuite, j'ai créé un nouveau niveau de l'application package.json également dans src et lui a donné le contenu suivant:
```
 {
  "name": "application-name",
  "description": "CLI app",
  "author": "Me me me",
  "version": "0.0.1",
  "main": "electron-main.js"
}
```
angulaires-cli.json
j'ai changé le outDir à build purement parce que les électrons semble sortie de dist par défaut et je voulais une séparation à ce stade. Ensuite, j'ai ajoutées dans package.json et electron-main.js à la assets tableau.

Paquet principal.json
j'ai enlevé le "main":"main.js" comme c'est apparemment n'est plus nécessaire ici. Dans scripts j'ai changé la commande test pour electron build pour le point sur le dossier où le logiciel code sera.
Enfin, je suis allé à la build champ et ajouté le contenu suivant:
```
"directories": {
  "buildResources": "build",
  "app": "build"
}
```
Semble assez évident maintenant. Cela indique au compilateur où trouver les biens qui composent l'appli finale. Il a été défaillant dans le répertoire de travail et que c'était mon problème.

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

Boom. Le travail est accompli. Je vais être de retour ici dans dix minutes avec un autre ennuyeux question je pense. Vous allez aimer les dev de ces jours 🙂
- est-il une autre façon de contourner ce problème est de le faire de cette façon?
- Vous donner une excellente pratique pour construire un électron app. Mais je ne trouve pas comment régler le problème "Pas autorisés à charger des ressources locales" lorsque vous essayez de charger certains fichiers locaux. Comment pouvez-vous résoudre ce problème?
- Est-ce toujours valable avec le plus up-to-date angulaire? Je ne sais pas ce que vous entendez par "Finalement, je suis allé à l'accumulation de terrain et a ajouté le contenu suivant: "répertoires": { "buildResources": "build", "rv": "construire" }"
InformationsquelleAutor popClingwrap
3

Dans le cas où cette aide à quelqu'un, le problème j'ai eu est que j'avais le chemin d'accès défini à l'aide de processus.mdc():
```
win.loadURL(`file://${process.cwd()}/dist/index.html`);
```
Qui, lorsqu'il est emballé n'est pas correcte, car le main.js le fichier n'est pas dans le root. Changer de __dirname:
```
win.loadURL(`file://${__dirname}/dist/index.html`);
```
Résolu le problème pour moi.

InformationsquelleAutor Zaptree
0

J'ai eu le même problème et la difficulté pour moi a été que la victoire.loadURL était faux (loadURL essayez de charger un fichier qui n'existe pas).
Assurez-vous que votre url est correcte, sinon vous obtiendrez cette erreur.

InformationsquelleAutor D.B
-1

J'ai eu le même problème. Cela a fonctionné pour moi
```
//and load the index.html of the app.
  window.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'), //important
    protocol: 'file:',
    slashes: true,
    //baseUrl: 'dist'
  }));
```
- url.format() il suffit de retourner une chaîne d'url, ne fait aucune différence.
- Je n'ai aucune idée. J'ai même des doutes que vous avez. mais il a travaillé.
- J'ai résolu. Vous avez pu voir dans ma réponse.
- Cela résout le problème, car l'url.le format est de passer à l'arrière d'une chaîne de comment loadURL attend. La solution ci-dessus en utilisant les tiques au lieu de simples citations des œuvres, mais aussi de cette.
InformationsquelleAutor Sibiraj
-3

Il suffit de changer le BrowserWindow' options:
new BrowserWindow({ webPreferences: { webSecurity: false } })
Si la fenêtre de l'url pointe vers une source distante, comme http://..., navigateur ne permettent pas de charger la ressource locale, sauf si vous définissez les options ci-dessus.
- Désactivation de la sécurité est jamais une réponse
- Le problème, c'est la valeur par défaut des options de sécurité d'un navigateur pas autorisés à charger des ressources locales, mais Électron n'est pas un simple navigateur. Avez-vous une autre façon?
InformationsquelleAutor pingze

Vous devez vous connecter pour publier un commentaire.