【发布时间】：2020-01-04 04:42:24
【问题描述】：
我一直在尝试使用 Electron 将我的 Angular 8 应用程序导出到桌面应用程序。我想出了如何用 Electron 运行它，但是当我决定使用电子打包器时，我遇到了一个错误。我得到的错误与找不到“app-root-path”有关。我正在使用 main.ts 并将其转换为电子使用的 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.
package.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 时遇到了这个问题。
【问题讨论】：
标签： javascript node.js angular electron