不允许在电子中加载本地资源错误 - Angular v7.0.1答案

【问题标题】：Not allowed to load local resource error in electron - angular v7.0.1不允许在电子中加载本地资源错误 - Angular v7.0.1
【发布时间】：2020-01-01 13:00:07
【问题描述】：

我第一次尝试使用 Electron 设置我的应用程序。添加 main.js、更改 index.html、更改 package.json 的初始步骤已完成。当我尝试使用命令npm run electron-build 运行应用程序时，我得到一个如下屏幕。

Error-while-running-electron-app

我无法运行我的应用程序。基本上不是错误，只是缺少信息。对此的任何帮助将不胜感激。 TIA。

main.js

const { app, BrowserWindow } = require('electron')

let win;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 600, 
    height: 600,
    backgroundColor: '#ffffff',
    icon: `file://${__dirname}/dist/assets/logo.png`
  })


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

  win.webContents.openDevTools()

  // Event when the window is closed.
  win.on('closed', function () {
    win = null
  })
}

// Create window on electron intialization
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {

  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // macOS specific close process
  if (win === null) {
    createWindow()
  }
})

package.json

 "name": "angular-electron-first-app",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "electron .",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .",
    "electron-build": "ng build --prod && npm run electron ."
  },

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularElectron</title>
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

</body>
</html>

其他细节：角v7.1.0 RxJS v6.5.2 NPM v6.5.0

【问题讨论】：

希望这篇文档对你有帮助 [electronjs.org/docs/tutorial/first-app]
@PushprajsinhChudasama 404-页面未找到
对不起，链接是electronjs.org/docs/tutorial/first-app
我得到了本教程的帮助。已遵循相同的步骤，但我的应用程序无法运行。我只能看到上面的屏幕。
没有看到一些代码，没有人可以帮助你，

标签： angular electron

【解决方案1】：

将loadFile 用于本地资源

win.loadFile(filePath[, options])
filePath String

options Object (optional)
    query Object (optional) - Passed to url.format().
    search String (optional) - Passed to url.format().
    hash String (optional) - Passed to url.format().
返回 Promise - 当页面有完成加载（参见 did-finish-load），如果页面失败则拒绝加载（参见 did-fail-load）。

与 webContents.loadFile 相同，filePath 应该是 HTML 的路径文件相对于您的应用程序的根目录。见网页内容文档以获取更多信息。

【讨论】：

loadURL 是我发现的问题。更新它为我解决了这个问题。

【解决方案2】：

在尝试寻找答案时，我尝试并发现问题在于 main.js 的 loadURL。下面的代码更改为我解决了这个问题。

main.js

来自

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

到

win.loadURL(`file:///${__dirname}/dist/angular-electron-first-app/index.html`);

这里，angular-election-first-app 是在 dist 文件夹中创建的项目文件夹。

【讨论】：