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。这很好用。一个电子应用程序启动，我看到它内部有角度的东西。

创建分发应用
运行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时失败的打包应用与运行正常的应用之间有什么不同吗？

如何解决此问题并使应用正常运行？

感谢您将其制作到最后。这比我想要的要长，但我希望我解释得很好。如果你能提供帮助或给出任何可能很棒的指示 - 你的大方向会想到许多好的共鸣：）

干杯全部

Answer 1

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

Answer 2

经过了大量的试验和错误，但我得到了这个工作。这里有很多我不完全理解的东西，很多可能是毫无意义或不好的做法，它可能都会在下一步堕落但如果和我一样，你只是试图克服第一步驼峰然后我发现可能会帮助你。

我通过unpacking app.asar生成的electron-builder文件找到了问题。它不包含我的dist文件夹中的捆绑代码，而是包含所有项目代码（*.ts *.scss等）。问题只在于打包功能正在收拾错误的东西。
当你把它们放到最后的应用程序中时，获取正确的源代码的步骤很简单但是我的上帝他们并没有提出一个问题。斗争！从我在最初的问题中离开的地方开始，我做了以下......

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

电子特定文件
我将main.js向下移动到src并将其名称更改为electron-main.js，以阻止与main.ts混淆{1}}已经在那里了。我还将其引用的路径更改回/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.js和package.json一起捆绑到npm run electron文件夹中。
这样做我可以运行npm run pack以快速启动测试应用或Finder以构建可从chart.leftAxis.drawValuesEnabled = false chart.rightAxis.drawValuesEnabled = true启动的应用。

动臂。任务完成。我会在十分钟内带着另一个令人烦恼的问题回到这里。这几天一定要爱开发者。）

Answer 3

如果这对任何人都有用，那么我遇到的问题是我使用 process.cwd（）设置了路径：

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

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

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

为我解决了这个问题。

Answer 4

我有同样的问题，对我来说，麻烦的是win.loadURL为假（loadURL尝试加载不存在的文件）。确保您的网址正确无误，否则会出现此错误。

Answer 5

这在Linux上对我有效

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

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

Answer 6

您只是在这里缺少'.'。您只需要放置相对路径而不是绝对路径即可。

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

Answer 7

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

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

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

，并在index.html中将基本href更改为

 <base href="">

Answer 8

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 9

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

// 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 10

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

电子 - 不允许加载本地资源

10 个答案: