首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么我的Angular 8应用程序不能使用Electron Packager正确打包?

为什么我的Angular 8应用程序不能使用Electron Packager正确打包?
EN

Stack Overflow用户
提问于 2019-08-31 11:43:35
回答 2查看 547关注 0票数 2

我一直在尝试使用Electron将我的Angular 8应用程序导出到桌面应用程序。我想出了如何用Electron运行它,但当我决定使用电子打包器时,我遇到了一个错误。我得到的错误与找不到'app-root-path‘有关。我正在使用一个main.ts,并把它变成电子公司使用的main.js。任何帮助都将不胜感激。

Main.ts

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
{
  "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创建可执行文件时,我单击它,但我得到相同的错误。"Javascript错误:错误:找不到模块'app-root-path‘需要堆栈: /Invoices/Invoices电子app-darwin-x64/Invoices电子app。app/Contents/Resources/app/bin/Main.js“我遇到的唯一另一个问题是必须将tsconfig.json目标设置为"es5”,然后我在尝试使用电子打包器时遇到了这个问题。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-21 01:33:45

让我这样做的是,首先将启动电子命令设置为

代码语言:javascript
运行
复制
 "start:electron": "ng build --base-href ./ && electron ."

然后在我的angular.json中将OutputPath设置为

代码语言:javascript
运行
复制
 "outputPath": "dist"

然后,为了修复最后一个错误"Failed to load module script“,我在tsconfig.json中进行了更改

代码语言:javascript
运行
复制
"target": "es2015" to "target": "es5"

这修复了我的应用程序,并允许电子正常工作

票数 0
EN

Stack Overflow用户

发布于 2020-10-10 04:43:57

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

代码语言:javascript
运行
复制
<base href="./"> 

请注意添加。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57735007

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档