Electron

Question

晚上，
我正在考虑使用 electron 来打包现有的 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
我刚刚从electron quick start复制了代码。我所做的唯一更改是将 index.html 的位置设置为 /dist/index.html

修改基础
在index.html中将<base="/">改为<base="./">

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

测试运行
运行npm run electron。这很好用。一个 Electron 应用程序启动了，我在其中看到 angular 内容运行ning。

创建用于分发的应用程序
运行 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 时运行正常的应用程序之间的区别？

如何解决此问题并正确获取应用运行ning？

感谢您坚持到最后。这比我想要的要长，但我希望我能解释清楚。如果您能提供帮助或提供任何建议，那就太好了 - 在您的总体方向上会想到很多好的共鸣:)

大家干杯

Answer 1

经过多次试验和错误，但我成功了。这里有很多我不完全理解的东西，很多东西可能是毫无意义的或不好的做法，它们可能会在下一步中全部失败，但如果像我一样，你只是想克服第一个障碍，那么也许我找到的东西会对你有所帮助。

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

记住我的项目结构是默认的angular-cli

设置的

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

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

angular-cli.json
我把outDir改成了build纯粹是因为electron好像默认输出到 dist，我想在这个阶段进行一些分离。然后我将 package.json 和 electron-main.js 添加到 assets 数组。

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

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

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

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

启动的应用程序

繁荣。任务完成。十分钟后我会带着另一个烦人的问题回到这里。这些天我爱上了开发者:)

Answer 2

我遇到了同样的问题。这对我有用

// 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'
  }));

Answer 3

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

Answer 4

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

Answer 5

万一这对任何人都有帮助，我遇到的问题是我使用 process.cwd():

设置了路径

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

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

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

为我解决了这个问题。

Answer 6

我有同样的问题，我的错误是 win.loadURL 不正确（loadURL 试图加载一个不存在的文件）。确保你的 url 是正确的，否则你会得到一个错误。

Answer 7

这适用于我 linux

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

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

Answer 8

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

win.loadFile('./dist/index.html');

Answer 9

当我尝试使用 electron-builder...

构建我的应用程序时，我遇到了确切的问题

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

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

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

 <base href="">

Answer 10

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"
  }
}

Answer 11

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

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

在 dist 文件夹中，我找到了一个名为 electronapp 的文件夹，但在路径中它是 electron-app，因此通过更改文件夹名称它起作用了。
您可以更改 angular.json 中的输出路径，并指定与错误中显示的路径相同的名称

Answer 12

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

在我的例子中，我的构建文件夹“dist”被 electron-builder 忽略并且没有正确打包到 /app 中。

See this issue for more information

Answer 13

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

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

至此，带有安装程序的打包应用程序现在已在 release/ 文件夹中创建，现在我可以安装它了。 dist/ 文件夹保留，因为那是 Angular 构建应用程序的地方。

Electron - 不允许加载本地资源

Electron - Not allowed to load local resource

angular

angular-cli

electron-builder