不允许加载本地资源 electron/angular/electron-builder

Question

我正在构建一个使用 angular 的电子应用程序。但是，当我尝试使用 electron-builder 打包应用程序时，出现错误：

Not allowed to load local resource: file:///C:/Users/Eric/AppData/Local/Programs/kaysi/resources/app.asar/dist/index.html

electron和electron-builder的quick start我都用过了。但是，我确实添加了 dist/ 以使其与

一起使用

win.loadURL(url.format({
  pathname: path.join(__dirname, 'dist/index.html'),
  protocol: 'file:',
  slashes: true
}))

如果使用 electron . 我的应用程序运行良好，但只有在我运行安装程序后才会发生。

Answer 1

好的，我最终做的是构建我的 angular 项目，并在它输出的 dist 文件夹中，从那里创建 main.js 和运行电子。

Answer 2

我遇到了同样的问题。 NodeJs 10.13.0，Angular 7，Electron 3.0.8，Electron Builder 20.36.2

在我的 angular.json 中，outputPath 的默认配置是 dist

"options": {
             "outputPath": "dist/",
}

electron中windows的构建操作将所有生成的内容放在dist文件夹中。

我最初虽然阅读错误：

**Not allowed to load local resource:file:///C:/Users/Jorge/Documents/Git/CaexCommandCenter/dist/win-unpacked/resources/app.asar/dist/index.html**

是 app.asar 文件在 dist 文件夹中不包含任何文件调用 index.html。

所以我安装了 Asar:

npm install -g asar

并继续验证文件 dist/index.html 是否打包在 app.asar

$ asar list C:/Users/Jorge/Documents/Git/CaexCommandCenter/dist/win-unpacked/resources/app.asar/ > elements_packaged.txt

我没能在 app.asar 中找到任何名为 dist 的文件夹，所以我的结论是在电子中构建过程，将项目的所有内容放入将生成应用程序的文件夹中，在本例中为 dist.

我的下一步是更改 angular.json 中 outputPath 的值，然后执行 ng 构建:

"options": {
                        "outputPath": "angular_build/"`
}

然后在electron app中更改加载路径(main.js):

var indexPath = path.resolve(__dirname, 'angular_build/index.html');
mainWindow.loadURL(indexPath);

构建后一切正常

Not Allowed to load local resource electron/angular/electron-builder