如何在 Jhipster Angular 生成的应用程序上使用电子？答案

【问题标题】：How to use electron on Jhipster Angular generated application?如何在 Jhipster Angular 生成的应用程序上使用电子？
【发布时间】：2020-02-22 01:04:19
【问题描述】：

我刚刚发现了 electron，发现它很有趣，所以我想在我的 jhipster angular 项目（最新的 jhipster 版本）上实现它

我尝试按照本教程进行调整，但我相信由于 Jhipster 使用 Webpack，我的构建并不好

这就是我所做的

我在 src/main/webapp 文件夹中声明了一个 main.js 文件，如下所示

const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  // load the dist folder from Angular
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );

  // The following is optional and will open the DevTools:
  // win.webContents.openDevTools()

  win.on("closed", () => {
    win = null;
  });
}

app.on("ready", createWindow);

// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

// initialize the app's main window
app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

然后我尝试如下更新我的配置文件

package.json

{
  "name": "boxing",
  "version": "0.0.1-SNAPSHOT",
  "main": "main.js", <-- added this
  "description": "Description for boxing",
  "private": true,
  "license": "UNLICENSED",
  "cacheDirectories": [
    "node_modules"
  ],
  "dependencies": {
    "@angular-devkit/build-angular": "^0.803.14", <-- installed using npm
    ...
  "scripts": {
    "electron": "ng build --base-href ./ && electron .",

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "boxing": {
      "root": "",
      "sourceRoot": "src/main/webapp",
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "skipTests": true,
          "style": "scss"
        },
        "@schematics/angular:directive": {
          "skipTests": true
        },
        "@schematics/angular:guard": {
          "skipTests": true
        },
        "@schematics/angular:pipe": {
          "skipTests": true
        },
        "@schematics/angular:service": {
          "skipTests": true
        }
      },
      "prefix": "jhi",
      "architect": {
        <-- added this lines
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist"
          }
        }
       <-- end of add
      }
    }
  },
  "defaultProject": "boxing",
  "cli": {
    "packageManager": "npm"
  }
}

我终于将我的 index.html href 更新为 ./

但是当我在终端运行命令时，我得到了这个错误

npm 运行电子

boxing@0.0.1-SNAPSHOT 电子 /home/housseyn/Desktop/projects/salle-de-sport ng build --base-href ./ && electron .

架构验证失败，出现以下错误：数据路径“”应该具有必需的属性“主”。 npm 错误！代码生命周期 npm 错误！错误号 1 npm 错误！ boxing@0.0.1-SNAPSHOT 电子：ng build --base-href ./ && electron . npm 错误！退出状态 1 npm 错误！ npm 错误！在 boxing@0.0.1-SNAPSHOT 电子脚本中失败。 npm 错误！这可能不是 npm 的问题。 >上面可能还有其他日志记录输出。

npm 错误！可以在以下位置找到此运行的完整日志： npm 错误！ /home/housseyn/.npm/_logs/2019-10-25T16_00_19_675Z-debug.log

【问题讨论】：

标签： javascript node.js angular electron jhipster

【解决方案1】：

您必须使用此命令npm run electron-build 构建您的项目，然后将其添加到您的 package.json 脚本中

签到这个doc直到结束

希望对你有帮助，

【讨论】：

为什么有 2 个答案？编辑您的第一个答案。

【解决方案2】：

使用这个配置：

{
          "name": "angular-electron-demo",
          "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",
            "start:electron": "ng build --base-href ./ && electron ."
          }, 
          // [...]
        }

添加后，您可以使用 start:electron 脚本执行 ng build --base-href ./ && electron 。它首先构建项目，然后从当前文件夹运行电子。

回到你的终端并运行：

npm run start:electron

【讨论】：