Not allowed to load local resource error in electron - angular v7.0.1

Question

I'm trying to set up my application with Electron for the first time. The initial steps of adding main.js, changing the index.html, changing the package.json are done. While I try to run the application using the command npm run electron-build, I get a screen as below.

Error-while-running-electron-app

I'm not able to run my application. It isn't an error basically, but just lack of information. Any help regarding this will be much appreciated. 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>

Other details: Angular v7.1.0 RxJS v6.5.2 NPM v6.5.0

Hope this document will help you [electronjs.org/docs/tutorial/first-app] — Pushprajsinh Chudasama
I've taken the help of this tutorial. Have followed the same steps yet my application fails to run. I can see the above screen only. — Miral Kumbhani

spring spring · Accepted Answer · 2019-08-29T14:00:32

Use loadFile with local resources

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().
Returns Promise - the promise will resolve when the page has finished loading (see did-finish-load), and rejects if the page fails to load (see did-fail-load).

Same as webContents.loadFile, filePath should be a path to an HTML file relative to the root of your application. See the webContents docs for more information.

Not allowed to load local resource error in electron - angular v7.0.1

2 Answers