Electron - nicht erlaubt, lokale Ressource zu laden

Question

Abend,
Ich bin in der Verwendung von electron zu einem vorhandenen angular2 Build zu packen. Ich dachte, ich hätte einen Trockenlauf, aber die eigentliche Verpackung scheint zu versagen (siehe letzten Schritt unten) und ich möchte verstehen, warum. Hier ist, was ich tue ...

Projekt erstellen
Verwenden angular-cli ein neues Projekt starten ng new electron-ng2-cli --style=scss

Elektron Installieren und electron-builder

bearbeiten package.json
Nehmen Sie die folgenden Ergänzungen ...
"main": "main.js"

und fügen Sie den folgenden auf die scripts ...

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

erstellen main.js
ich nur den Code aus dem electron quick start kopiert. Die einzige Änderung, die ich machen, ist an die Stelle von index.html, die ich /dist/index.html gesetzt

Basis Amend
In index.html Änderung <base="/"> zu <base="./">

Pack-Code
Run ng build. Damit sind alle verpackt Code in /dist

Testlauf
Run npm run electron. Das funktioniert gut. Eine Elektronen-App feuert an und ich sehe das kantige Zeug darin laufen.

App für die Verteilung erstellen
Führen Sie npm run pack aus, um eine verpackte App zu erstellen. Die Verpackung scheint in Ordnung zu gehen - ich bekomme eine Warnung über ein fehlendes Symbol und eine Warnung, dass mein Code nicht signiert ist, aber ich vermute, dass sie nicht tödlich sein sollten?
Das Problem ist, dass, wenn ich jetzt die App mit einem Doppelklick in Finder ich einen Fehler in der Konsole laufen zu sagen: 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

---

So kann jemand erklären, was zwischen der gepackte Anwendung unterscheidet, und einen ausfällt, die ok läuft wenn ich npm run electron verwende?

Was kann ich tun, um dieses Problem zu beheben und die App ordnungsgemäß zu starten?

Danke, dass Sie es bis zum Ende gemacht haben. Dies wurde länger als ich wollte, aber ich hoffe, ich habe mich selbst erklärt. Wenn Sie irgendwelche Hinweise helfen oder geben kann, das wäre toll - viele gute Stimmung in Ihrer allgemeinen Richtung gedacht werden :)

Prost alle

Answer 1

Es dauerte eine Menge von Versuch und Irrtum, aber ich habe diese Arbeit.Es gibt eine Menge hier, die ich nicht völlig verstehe, und vieles, was vielleicht sinnlos oder schlecht ist, und es könnte alles im nächsten Schritt fallen, aber wenn du, wie ich, nur versuchst, über den ersten Buckel hinwegzukommen Vielleicht hilft dir etwas, das ich gefunden habe.

Ich fand das Problem von unpacking die app.asar Datei, die electron-builder produziert. Anstatt den gebündelten Code aus meinem Ordner dist enthielt es den gesamten Projektcode (*.ts *.scss usw.). Das Problem war nur, dass die Verpackungsfunktionen die falschen Sachen packten.
Die Schritte, um die richtige Quelle in die endgültige App zu bekommen, sind einfach, wenn du sie auslegst, aber mein Gott, sie haben sich nicht zur Wehr gesetzt! Ausgehend von dem ich links in meiner ersten Frage aus habe ich die folgenden ...

Denken Sie daran, dass meine Projektstruktur ist die Standardeinstellung einer von Winkel-cli

Electron bestimmte Dateien einrichten
I bewegte Die main.js down in src und änderte ihren Namen in electron-main.js, nur um jede Verwirrung mit der main.ts, die bereits da ist zu stoppen. Ich änderte auch den Pfad, auf den er verweist, zurück auf /index.html.
Weiter habe ich eine neue Anwendungsebene package.json auch in src und gab es den folgenden Inhalt:

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

Winkel cli.json
ich die outDir zu build geändert rein, weil Elektronen zur Ausgabe standardmäßig dist scheint und ich wollte eine Trennung in diesem Stadium. Dann fügte ich package.json und electron-main.js zum assets Array hinzu.

Hauptpaket.json
Ich entfernte die "main":"main.js", wie es anscheinend nicht mehr hier benötigt wird. In scripts änderte ich den Testbefehl zu electron build, um es auf den Erstellungsordner zu zeigen, wo der gebündelte Code sein wird.
Schließlich ging ich zum build Feld und fügte den folgenden Inhalt:

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

scheint jetzt ziemlich offensichtlich. Dies sagt dem Compiler nur, wo er nach den Assets suchen soll, aus denen die endgültige App besteht. Es war standardmäßig auf das Arbeitsverzeichnis und das war mein Problem.

Mit diesem Setup kann ich jetzt ng build laufe mein Projekt in die build Ordner zu bündeln zusammen mit den electron-main.js und package.json.
Dies kann ich npm run electron ausführen, um schnell eine Test-App oder npm run pack starten, um eine App zu erstellen, die von Finder gestartet werden kann.

Boom. Job erledigt. Ich werde in zehn Minuten wieder da sein mit einer weiteren nervigen Frage, die ich erwarte. Ich liebe das Dev diese Tage :)

Answer 2

Ich hatte das gleiche Problem. Ich wechsle nur meine Elektronen Code

// 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' 
    }));