angular - Electron - ローカルリソースのロードが許可されていません

Question

夕方、electronを使用して既存の angular2 ビルドをパッケージ
化することを検討しています。ドライランが機能していると思っていましたが、実際のパッケージングは失敗しているようで (以下の最終ステップを参照)、その理由を理解したいと考えています。これが私がやっていることです...

プロジェクトの作成angular-cli
を使用して新しいプロジェクトを開始しますng new electron-ng2-cli --style=scss

electron とelectron-builderをインストールします

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 を作成します。electronクイックスタート
からコードをコピーしました。私が行う唯一の変更は、設定した場所に対するものです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か?

この問題を修正してアプリを正しく実行するにはどうすればよいですか?

最後までお付き合いいただきありがとうございました。これは私が望んでいたよりも長くなりましたが、うまく説明できれば幸いです。あなたが助けたり、何かアドバイスをしたりすることができれば、あなたの一般的な方向性に多くの良いバイブが考えられます:)

乾杯

score 27 · Accepted Answer

多くの試行錯誤が必要でしたが、これでうまくいきました。ここには私が完全に理解していないことがたくさんあり、無意味または悪い習慣である可能性があり、次のステップですべてが失敗する可能性がありますが、私のように、最初のこぶを乗り越えようとしているだけなら多分私が見つけた何かがあなたを助けるでしょう。

生成されたファイルを解凍して問題を発見しました。私のフォルダーからバンドルされたコードを含める代わりに、すべてのプロジェクトコード (など) が含まれていました。問題は、パッキング関数が間違ったものをパッキングしていたことです。適切なソースを最終的なアプリに組み込むための手順は、並べてみると簡単ですが、なんと、彼らは中途半端な戦いをしませんでした! 最初の質問で中断したところから始めて、次のことを行いました...app.asarelectron-builderdist*.ts *.scss

私のプロジェクト構造は、angular-cli によって設定されたデフォルトのものであることを覚えておいてください

Electron 固有のファイルを下
に移動し、その名前をに変更して、既にそこにあるものとの混乱を防ぎました。また、参照先のパスも変更しました。次に、新しいアプリケーションレベルも作成し、次の内容を指定しました。main.jssrcelectron-main.jsmain.ts/index.html
package.jsonsrc

 {
  "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.jsonandを追加しました。electron-main.jsassets

メインの package.jsonは、ここでは不要になったようですので
、削除しました。テストコマンドをに変更して"main":"main.js"、バンドルされたコードが配置されるビルドフォルダーを指すようにしました。最後に、私は現場に行き、次の内容を追加しました。scriptselectron build
build

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

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

このセットアップを使用して、実行ng buildしてプロジェクトをbuildフォルダーにバンドルしelectron-main.js、package.json.
これを実行npm run electronして、テストアプリをすばやく起動したり、から起動npm run packできるアプリをビルドしたりできますFinder。

ブーム。ジョブ完了。私は 10 分後にここに戻ってきて、別の迷惑な質問をすると思います。最近、開発者を愛さなければなりません:)

score 9 · Accepted Answer

BrowserWindow のオプションを変更するだけです。 new BrowserWindow({ webPreferences: { webSecurity: false } }) ウィンドウの URL が http://... のようなリモートソースを指している場合、上記のオプションを設定しない限り、ブラウザーはローカルリソースの読み込みを許可しません。

score 2 · Accepted Answer

ここが欠けているだけ'.'です。絶対パスではなく相対パスを入力するだけです。

win.loadFile('./dist/index.html');

score 0 · Accepted Answer

By Changing "private": true, to "private": false in pakage.json. works for me good luck.

{
  "name": "dashboard",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "ng build && electron .",
    "pack":"electron-packager ."
  },
  "private": false,
  "dependencies": {
    "@angular/animations": "~10.2.0",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~10.2.0",
    "@angular/compiler": "~10.2.0",
    "@angular/core": "~10.2.0",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~10.2.0",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~10.2.0",
    "@angular/platform-browser-dynamic": "~10.2.0",
    "@angular/router": "~10.2.0",
    "hammerjs": "^2.0.8",
    "highcharts": "^7.2.2",
    "highcharts-angular": "^2.4.0",
    "rxjs": "~6.6.3",
    "tslib": "^1.14.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.0",
    "@angular/cli": "^10.2.0",
    "@angular/compiler-cli": "~10.2.0",
    "@angular/language-service": "~10.2.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "electron": "^10.1.5",
    "electron-packager": "^15.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.2.3",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~4.0.5"
  }
}

angular - Electron - ローカル リソースのロードが許可されていません

13 に答える 13

Related

Reference

angular - Electron - ローカルリソースのロードが許可されていません