不允许加载本地资源电子/角度/电子生成器答案

【问题标题】：Not Allowed to load local resource electron/angular/electron-builder不允许加载本地资源电子/角度/电子生成器
【发布时间】：2018-07-18 00:39:45
【问题描述】：

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

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

我使用了电子和电子生成器的所有快速启动。但是，我确实添加了 dist/ 以使其与

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

如果使用electron .，我的应用程序可以正常工作，但只有在我运行安装程序后才会出现。

【问题讨论】：

【解决方案1】：

我遇到了同样的问题。 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的文件夹，所以我的结论是在electron中的构建过程，把所有的内容项目，除了将生成应用程序的文件夹中的内容，在本例中为 dist。

我的下一步是更改 angular.json 中 outputPath 的值，并执行 ng build：

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

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

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

构建后一切正常

【讨论】：

【解决方案2】：

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

【讨论】：