为什么我的 Angular 8 应用程序没有使用 Electron Packager

Question

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

主文件

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();

  }

});

每当我编译应用程序并且 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

使这对我有用的是首先将启动电子命令设置为此 "start:electron": "ng build --base-href ./ && electron ."然后在我的 angular.json 中将 OutputPath 设置为 "outputPath": "dist"然后修复我的“无法加载模块脚本”的最终错误：我在 tsconfig.json 中进行了更改"target": "es2015" to "target": "es5"这修复了我的应用程序并允许电子正常工作

Answer 2

您是否在 index.html 中设置了以下内容？<base&nbsp;href="./">请注意添加 .