[解決済み] Electron - ローカルリソースのロードが許可されていません

質問

こんばんは。
を使うことを検討しています。 エレクトロン を使用して、既存のangular2ビルドをパッケージングしています。私はドライランが動作していると思ったのですが、実際のパッケージングは失敗しているようです（以下の最終ステップを参照）、私はその理由を理解したいと思います。以下は私がやっていることです。

プロジェクトの作成
使用方法 アンギュラークリ をクリックして、新しいプロジェクトを開始します。 ng new electron-ng2-cli --style=scss

electronをインストールし エレクトロンビルダー

package.jsonを編集する
以下のように追加してください...
"main": "main.js"

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

に以下を追加してください。 scripts ...

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

main.jsの作成
のコードをコピーしただけです。 電子クイックスタート . の場所だけ変更しています。 index.html に設定しました。 /dist/index.html

ベースを修正
で index.html 変更 <base="/"> から <base="./">

パックコード
実行 ng build . これにより、パッケージ化されたすべてのコードが /dist

テスト実行
実行 npm run electron . これは問題なく動作します。Electronアプリが起動し、その中でangularのものが動作しているのが見えます。

配布用アプリの作成
実行する npm run pack を実行して、パッケージ化されたアプリを作成します。パッケージングはうまくいっているようです。アイコンがないという警告と、コードが署名されていないという警告が表示されましたが、致命的なものではないと思います？
問題は、アプリをダブルクリックで実行したときに Finder というエラーがコンソールに表示されます。 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

---

ということで、パッケージ化されたアプリが失敗するのと、うまく動くのとでは何が違うのか、誰か説明してください。 npm run electron ?

この問題を解決し、アプリを正常に動作させるにはどうしたらよいですか？

最後までご覧いただき、ありがとうございました。思ったより長くなってしまいましたが、うまく説明できたでしょうか。もし、あなたが手助けをしたり、何かヒントを与えることができるのであれば、それは素晴らしいことです。）

みんなに乾杯

解決方法は？

試行錯誤しながらも、なんとか動くようになりました。しかし、もしあなたが私のように、最初の壁を乗り越えようとしているのなら、私が見つけた何かがあなたの助けになるかもしれません。

で問題を発見しました。 解凍 その app.asar というファイル electron-builder が生成されます。私のバンドルされたコードを含む代わりに dist フォルダに、すべてのプロジェクトコード ( *.ts *.scss など）。問題は、パッキング関数が間違ったものをパッキングしていたことだけでした。
正しいソースを最終的なアプリに取り込むための手順は、並べると簡単なのですが、なんと彼らは半端な抵抗をしてくれませんでした。最初の質問で中断したところから始めて、次のようにしました...

私のプロジェクト構造は、angular-cliで設定されたデフォルトのものであることを忘れないでください。

Electron専用ファイル
を移動させました。 main.js を src に変更し、その名前を electron-main.js との混同を防ぐために main.ts がすでに存在しています。また、参照するパスを次のように変更しました。 /index.html .
次に、新しいアプリケーション・レベルを作成しました。 package.json の中にも src を作成し、以下の内容を付与しました。

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

angular-cli.json
を変更しました。 outDir から build に出力されるようなので、純粋にエレクトロンが dist をデフォルトで使用し、この段階で何らかの分離が欲しかったのです。次に package.json と electron-main.js から assets の配列になります。

メインパッケージ.json
を削除しました。 "main":"main.js" というのは、どうやらここではもう必要ないようです。で scripts テストコマンドを electron build を使用して、バンドルされるコードがあるビルドフォルダを指定します。
最後に build フィールドに、以下の内容を追加しました。

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

これでかなり明白になったと思います。これは、最終的なアプリを構成するアセットを探す場所をコンパイラに指示するだけです。デフォルトで作業ディレクトリが指定されていたので、それが私の問題でした。

この設定を使って ng build に私のプロジェクトをバンドルするために build フォルダと一緒に electron-main.js と package.json .
これで npm run electron でテストアプリを素早く起動したり npm run pack から起動できるアプリを構築する。 Finder .

ブームだ。仕事完了。また10分後に別の悩ましい質問を持ってここに戻ってきますね。最近の開発者を愛してやまない。）