javascript - 为什么我的 Angular 8 应用程序没有使用 Electron Packager 正确打包我的应用程序？

Question

我一直在尝试使用 Electron 将我的 Angular 8 应用程序导出到桌面应用程序。我想出了如何使用 Electron 运行它，但是当我决定使用 Electron 打包器时，我遇到了一个错误。我得到的错误与找不到“app-root-path”有关。我正在使用 main.ts 并将其转换为 Electron 使用的 main.js。任何帮助，将不胜感激。

Main.ts

import { app, BrowserWindow } from 'electron';
import { resolve } from 'app-root-path';

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win: BrowserWindow;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // Load the angular app.
  // Make sure that this path targets the index.html of the
  // angular application (the distribution).
  win.loadFile(resolve('dist/Invoices/index.html'));

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

包.json

{
  "name": "invoices",
  "productName": "Invoices electron app",
  "version": "0.0.0",
  "main": "bin/main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "tsc && ng build && electron bin/main.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@progress/kendo-angular-common": "^1.0.0",
    "@progress/kendo-angular-dateinputs": "^4.0.1",
    "@progress/kendo-angular-dropdowns": "^4.0.0",
    "@progress/kendo-angular-intl": "^2.0.0",
    "@progress/kendo-angular-l10n": "^2.0.0",
    "@progress/kendo-angular-popup": "^3.0.0",
    "@progress/kendo-theme-default": "latest",
    "html2canvas": "^1.0.0-rc.3",
    "jspdf": "^1.5.3",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.0",
    "@angular/cli": "~8.2.0",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "app-root-path": "^2.2.1",
    "codelyzer": "^5.0.0",
    "electron": "^6.0.4",
    "electron-packager": "^14.0.5",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "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": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

每当我编译应用程序并且 Electron-packager 创建 exe 时，我都会单击它，但我得到了同样的错误。 “Javascript 错误:
错误:找不到模块“app-root-path”
需要堆栈:/Invoices/Invoices electron app-darwin-x64/Invoices electron app.app/Contents/Resources/app/bin/main.js”
我遇到的唯一另一个问题是将 tsconfig.json 目标设置为“es5”，然后在尝试使用 Electron-packager 时遇到了这个问题。

Answer 1

您是否在 index.html 中设置了以下内容？

<base href="./"> 

请注意添加 .