web-dev-qa-db-ja.com

Angular 5でelectron-builderを使用してElectronアプリケーションを構築する

Angular 5アプリケーションをフロントエンドとして使用するelectronアプリケーションを作成しています。npmrunbuild&& electronicを実行してアプリケーションを開発モードで実行し、電子をトリガーすることができます。インスタンスを作成してangularサイトをロードします。ただし、ドキュメントに基づいてnpm run distを使用してビルドすると、ファイルを参照できないか、asarファイルまたはIを読み取ることができません。何か問題があるかもしれませんが、ここではまったくわかりません。exeファイルを実行しているアプリケーションをインストールすると、まったく空白の画面が表示されます。

Package.jsonとelectron-main.jspackage.jsonのコードスニペットを次に示します。

"version": "0.0.0",
  "license": "MIT",
  "main": "electron-main.js",

  "build": {
    "appId": "com.example.Dashboard",
    "productName": "Dashboard",

    "win": {
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "runAfterFinish": true
    }
  },

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "install-app-deps",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .",
    "electron-build": "ng build --prod && electron ."
  },

electronic-main.js

 win.loadURL(url.format({
        pathname: __dirname + '/dist/index.html',
        protocol: 'file:',
        slashes: true
    }))
node.jsangularelectronelectron-builder
5
Dan Patil

ついに多くの苦労と頭を壊すことは解決策を見つけました。まず、Electron-builderが必要な場所にファイルをビルドしていないため、GitHubに未解決のバグの問題があります。詳細については、これらのリンクを参照してください 1.Build Process Ignores app/dist/フォルダー？

2。/ app内のすべてのファイルがパッケージ化されているわけではありません。

通常、ReactJでは、混乱を避けるために2つのpackage.jsonファイルを使用しており、多くのWebpackコードを記述しています。

私が見つけた回避策があります。ここで正確に起こっているのは、angular-cliがdistフォルダーにビルドファイルを出力していることです。 Electron Builderは、そのファイルをdistフォルダーにも出力しています。

ここで最初に明確にしておきたいのは、npm run distを実行した場合、electronbuilderはファイルをビルドしないということです。

したがって、最初にng buildを実行しているファイルをビルドする必要があります。

次に、ビルドファイルを利用するためにビルドリソースを指定するpackage.jsonに変更を加える必要があり、electron-builderの出力ディレクトリを変更する必要があります。

変更されたpackage.jsonは次のようになります。

"main": "electron-main.js",

  "build": {
    "appId": "com.example.companyDashboard",
    "productName": "Farmhub Companies Dashboard",
    "files": ["**/*", "dist/**/*"],

  "directories": {
      "output": "release",
      "buildResources": "dist"
    },
    "asar":false,
    "win": {

      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "runAfterFinish": true,
      "license":"LICENSE"
    }
  },

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "pack": "build --dir",
    "dist": "build",
    "postinstall": "install-app-deps",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .",
    "electron-build": "ng build --prod && electron .",
    "electron-package": "electron-packager . FarmhubCompanyDashboard --platform=win32 --Arch=x64"
  },

コマンドを実行しているelectronbuilderを実行する場合npm run distそれはそよ風のように機能します。

15
Dan Patil