52

晚上，
我正在研究使用电子来打包现有的 angular2 构建。我以为我进行了试运行，但实际包装似乎失败了（请参阅下面的最后一步），我想了解原因。这就是我正在做的...

创建项目
使用angular-cli开始一个新项目ng new electron-ng2-cli --style=scss

安装电子和电子生成器

编辑 package.json
进行以下添加...
"main": "main.js"

"build":
{
  "appId": "com.electrontest.testapp",
  "mac": {
    "category": "your.app.category.type"
  }
}

并将以下内容添加到scripts...

"pack": "build --dir",
"dist": "build",
"electron": "electron main.js",
"postinstall": "install-app-deps"

创建 main.js我刚刚从电子快速
入门中复制了代码。我所做的唯一更改是我设置的位置index.html/dist/index.html

修改base改为
_index.html<base="/"><base="./">

打包代码
运行ng build。这会将所有打包的代码放入/dist

试运行
运行npm run electron。这工作正常。一个 Electron 应用程序启动，我看到其中运行有角度的东西。

为分发
运行创建应用程序npm run pack以创建打包的应用程序。包装似乎没问题 - 我收到关于缺少图标的警告和我的代码未签名的警告，但我猜它们不应该是致命的？
问题是，当我现在通过双击运行应用程序时Finder，控制台中出现错误消息：Not allowed to load local resource: file:///Users/<username>/Documents/development/electron-ng2-cli/dist/mac/electron-ng2-cli.app/Contents/Resources/app.asar/dist/index.html

那么，任何人都可以解释失败的打包应用程序与我使用时运行正常的应用程序之间有什么不同npm run electron吗？

我可以做些什么来解决这个问题并让应用程序正常运行？

谢谢你坚持到最后。这比我想要的要长，但我希望我能解释清楚。如果您能提供帮助或提供任何好的建议 - 在您的总体方向上会考虑到许多良好的氛围 :)

祝大家欢呼

4

13 回答 13

69

问题可能是路径无效main.js，如有必要请更正

在此处输入图像描述

于 2018-08-07T19:44:46.980 回答
27

这需要大量的试验和错误，但我得到了这个工作。这里有很多我不完全理解的东西，而且很多可能是毫无意义或不好的做法，而且它可能会在下一步全部失败，但如果像我一样，你只是想克服第一个驼峰也许我发现的东西会对你有所帮助。

我通过解压缩生成的app.asar文件发现了问题。electron-builder它没有包含我文件夹中的捆绑代码，dist而是包含所有项目代码（*.ts *.scss等）。问题只是打包函数打包了错误的东西。
当您布置它们时，将正确的源代码放入最终应用程序的步骤很简单，但我的上帝，他们没有半途而废！从我在最初的问题中离开的地方开始，我做了以下......

请记住，我的项目结构是 angular-cli 设置的默认结构

我将电子特定文件
移到其中main.js并将src其名称更改为electron-main.js只是为了避免与main.ts已经存在的文件混淆。我还将它引用的路径更改回/index.html.
接下来我也在其中创建了一个新的应用程序级别package.json，src并为其提供了以下内容：

 {
  "name": "application-name",
  "description": "CLI app",
  "author": "Me me me",
  "version": "0.0.1",
  "main": "electron-main.js"
}

angular-cli.json
我将其更改outDir为build纯粹是因为电子似乎dist默认输出为，我希望在此阶段进行一些分离。然后我将package.json和electron-main.js添加到assets数组中。

主 package.json
我删除了"main":"main.js"它，因为这里显然不再需要它。在scripts我将测试命令更改为将electron build其指向捆绑代码所在的构建文件夹。
最后，我去build外地，添加了以下内容：

"directories": {
  "buildResources": "build",
  "app": "build"
}

现在看起来很明显。这只是告诉编译器在哪里寻找构成最终应用程序的资产。它默认为工作目录，这是我的问题。

使用此设置，我现在可以运行将我的项目与和一起ng build捆绑到build文件夹中。完成此操作后，我可以运行以快速启动测试应用程序或构建可以从.electron-main.jspackage.json
npm run electronnpm run packFinder

繁荣。任务完成。我会在十分钟后回到这里，回答我期待的另一个烦人的问题。这些天必须爱开发人员:)

于 2016-12-15T21:32:27.207 回答
19

如果这对任何人都有帮助，我遇到的问题是我使用process.cwd()设置了路径：

win.loadURL(`file://${process.cwd()}/dist/index.html`);

打包时不正确，因为 main.js 文件不再位于根目录中。更改为__dirname：

win.loadURL(`file://${__dirname}/dist/index.html`);

为我解决了这个问题。

于 2019-01-01T16:29:29.433 回答
9

只需更改 BrowserWindow' 选项： new BrowserWindow({ webPreferences: { webSecurity: false } }) 如果窗口的 url 指向远程源，例如 http://...，浏览器将不允许加载本地资源，除非您设置了上述选项。

于 2018-03-16T10:00:14.020 回答
6

我有同样的问题，我的错误是win.loadURL不正确（loadURL 试图加载一个不存在的文件）。确保您的网址正确，否则您将收到错误消息。

于 2019-04-16T12:40:17.343 回答
2

这在 linux 上对我有用

 newWindow.loadFile(`${__dirname}/index.html`);

您可以添加它来查看 main.js 的目录，然后从那里导航到 index.html。 console.log(__dirname)

于 2019-11-14T20:37:42.810 回答
2

你只是在'.'这里错过了一个。您只需要放置相对路径而不是绝对路径。

win.loadFile('./dist/index.html');
于 2019-11-26T10:40:09.830 回答
1

我目前正在运行 Angular12+，这个简单的解决方案对我有用：

"build": {
    //config
    "directories": {"output": "release/"},
    //more config
}

有了这个，带有安装程序的打包应用程序现在在 release/ 文件夹中创建，现在我可以安装它了。dist/ 文件夹仍然存在，因为这是 Angular 构建应用程序的地方。

于 2022-02-20T14:54:58.600 回答
0

我有同样的问题。这对我有用

// and load the index.html of the app.
  window.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'), // important
    protocol: 'file:',
    slashes: true,
    // baseUrl: 'dist'
  }));
于 2017-08-30T13:45:45.603 回答
0

当我尝试使用电子生成器构建我的应用程序时，我遇到了确切的问题......

对我有用的是我用 ng build 构建的 package.json 文件，然后运行 ​​electron-builder

"scripts": {
 ...
"build-installer": "ng build --prod && electron-builder"
},

并在 index.html 中将 base href 更改为

 <base href="">
于 2020-09-26T21:37:30.313 回答
0 
By Changing "private": true, to "private": false in pakage.json. works for me good luck.

{
  "name": "dashboard",
  "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",
    "electron": "ng build && electron .",
    "pack":"electron-packager ."
  },
  "private": false,
  "dependencies": {
    "@angular/animations": "~10.2.0",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~10.2.0",
    "@angular/compiler": "~10.2.0",
    "@angular/core": "~10.2.0",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~10.2.0",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~10.2.0",
    "@angular/platform-browser-dynamic": "~10.2.0",
    "@angular/router": "~10.2.0",
    "hammerjs": "^2.0.8",
    "highcharts": "^7.2.2",
    "highcharts-angular": "^2.4.0",
    "rxjs": "~6.6.3",
    "tslib": "^1.14.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.0",
    "@angular/cli": "^10.2.0",
    "@angular/compiler-cli": "~10.2.0",
    "@angular/language-service": "~10.2.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "electron": "^10.1.5",
    "electron-packager": "^15.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.2.3",
    "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": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~4.0.5"
  }
}
于 2020-10-27T18:31:23.863 回答
0

我有同样的问题，我通过寻找路径解决了它。
例如我的错误信息是

file:///C:/Users/username/Desktop/fetni%20mohamed/electron/app/elctronapp/dist/electron-app/index.html

在 dist 文件夹中，我找到了一个名为 electronapp 的文件夹，但在路径中它是电子应用程序，因此通过更改它的文件夹名称。
您可以更改 angular.json 中的输出路径，并指定与错误中显示的路径相同的名称
于 2021-08-18T13:22:00.883 回答
0

这也可以在 index.html 不存在时抛出。

就我而言，我的构建文件夹“dist”被电子构建器忽略了，并且没有正确打包到 /app 中。

有关更多信息，请参阅此问题

于 2021-12-10T20:22:53.777 回答