Angular Electron-不允许加载本地资源

晚上好，
我正在考虑使用来打包现有的angular2构建。我以为我有一个干运行工作，但实际的包装似乎是失败的（见下面的最后一步），我想了解为什么。这是我正在做的

创建项目
用于启动新项目

ng new-electron-ng2-cli--style=scss

安装电子和

编辑package.json
添加以下内容…

“main”：“main.js”

并将以下内容添加到

脚本中

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

创建main.js
我刚刚从。我所做的唯一更改是

index.html

的位置，我将其设置为

/dist/index.html

修改

index.html中的base
将
更改为

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

试运行
运行
npm运行电子设备
。这个很好用。一个电子应用程序启动了，我看到里面运行着有角度的东西

创建分发应用程序
运行
npm运行包
创建打包应用程序。包装似乎正常-我收到一条关于丢失图标的警告，以及一条关于我的代码未签名的警告，但我猜它们不应该是致命的？

问题是，当我现在通过双击
Finder
运行应用程序时，控制台中会出现一个错误，提示：
不允许加载本地资源：file:///Users//Documents/development/electron-ng2-cli/dist/mac/electron-ng2-cli.app/Contents/Resources/app.asar/dist/index.html

那么，当我使用
npm-run-electron
时，谁能解释一下失败的打包应用程序和正常运行的打包应用程序之间的区别呢

如何解决此问题并使应用程序正确运行

谢谢你坚持到底。这比我想的要长，但我希望我能解释清楚。如果你能提供帮助或提出一些建议，那将是非常好的——在你的大方向上会有很多好的共鸣：）

干杯所有
这需要很多的尝试和错误，但我得到了这个工作。这里有很多我不完全理解的地方，很多可能是毫无意义的或不好的做法，在下一步可能会失败，但如果你和我一样，只是想克服第一个困难，那么也许我发现了一些东西可以帮助你

我通过
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"
}

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

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

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

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

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

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

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

轰。工作完成了。我十分钟后回来，我想问另一个恼人的问题。这几天一定很喜欢这个开发工具：）
我也有同样的问题。这对我有用

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

只需更改BrowserWindow的选项：

新浏览器窗口({
网络首选项：{
网站安全性：false
}
})

如果窗口的url指向远程源，如http://...，浏览器将不允许加载本地资源，除非您设置了上述选项。
问题可能是
main.js中的路径无效，如有必要，请更正它

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

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

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

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

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

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

为我修复了这个问题。
我也遇到了同样的问题，我的错误是赢了。loadURL
不正确（loadURL试图加载一个不存在的文件）。
请确保您的url是正确的，否则您将得到一个错误。
这在linux上适用于我

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

您可以添加它以查看main.js的目录，也可以从