Electron - Not allowed to load local resource

Question

Evening,
I'm looking into using electron to package an existing angular2 build. I thought I had a dry run working but the actual packaging seems to be failing (see final step below) and I want to understand why. Here's what I'm doing...

Create Project
Use angular-cli to start a new project ng new electron-ng2-cli --style=scss

Install electron and electron-builder

Edit package.json
Make the following additions...
"main": "main.js"

"build":
{
  "appId": "com.electrontest.testapp",
  "mac": {
    "category": "your.app.category.type"
  }
}

and add the following to the scripts...

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

Create main.js
I just copied the code from the electron quick start. The only change I make is to the location of index.html which I set to /dist/index.html

Amend base
In index.html change <base="/"> to <base="./">

Pack code
Run ng build. This puts all the packaged code in /dist

Test Run
Run npm run electron. This works fine. An Electron app fires up and I see the angular stuff running within it.

Create App For Distribution
Run npm run pack to create a packaged app. The packaging seems to go ok - I get a warning about a missing icon and a warning that my code is unsigned but I'm guessing they shouldn't be fatal?
The problem is that when I now run the app by double clicking in Finder I get an error in the console saying: Not allowed to load local resource: file:///Users/<username>/Documents/development/electron-ng2-cli/dist/mac/electron-ng2-cli.app/Contents/Resources/app.asar/dist/index.html

---

So, can anyone explain what is different between the packaged app that fails and the one that runs ok when I use npm run electron?

What can I do to fix this issue and get the app running correctly?

Thank you for making it to the end. This got longer than I wanted but I hope I explained myself ok. If you can help or give any pointers that would be great - many good vibes will be thought in your general direction :)

Cheers all

Answer 1

Problem may be the invalid path in main.js, correct it if necessary

Answer 2

In case this helps anyone, the issue I was having was I had the path set using process.cwd():

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

Which when packaged is not correct since the the main.js file is not in the root anymore. Changing to __dirname:

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

Fixed the issue for me.

Answer 3

Just change the BrowserWindow' options: new BrowserWindow({ webPreferences: { webSecurity: false } }) If window's url points to a remote source, like http://..., browser will not allow to load local resource, unless you set the options above.

Answer 4

I had the same issue and my mistake was the win.loadURL was not correct (loadURL tried to load a file who doesn't exist). Be sure your url is correct otherwise you will get an error.

Answer 5

this works for me on linux

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

you can add this to view the directory of your main.js and from there navigate to the index.html. console.log(__dirname)

Answer 6

You are just missing a '.' here. You only need to put relative path instead of absolute path.

win.loadFile('./dist/index.html');

Answer 7

i had the same problem and I solved it by looking for the path .
for exemple my error message is

file:///C:/Users/username/Desktop/fetni%20mohamed/electron/app/elctronapp/dist/electron-app/index.html

looking in the dist folder I found a folder named electronapp but in the path it's electron-app so by changing the folder name it worked.
you can change the output path in the angular.json, and specifiy the same name as in the path shown in the error

Answer 8

I'm currently running Angular12+ and this simple solution worked for me:

"build": {
    //config
    "directories": {"output": "release/"},
    //more config
}

With this, the packed app with the installer is now created in release/ folder, and now I can install it. The dist/ folder remains, because that's where Angular builds the app.

Answer 9

I had the exact problem when i tried to build my app with electron-builder...

What worked for me was in package.json file i built with ng build then runed electron-builder

"scripts": {
 ...
"build-installer": "ng build --prod && electron-builder"
},

and in the index.html changed base href to

 <base href="">

Answer 10

By Changing "private": true, to "private": false in pakage.json. works for me good luck.

{
  "name": "dashboard",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "ng build && electron .",
    "pack":"electron-packager ."
  },
  "private": false,
  "dependencies": {
    "@angular/animations": "~10.2.0",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~10.2.0",
    "@angular/compiler": "~10.2.0",
    "@angular/core": "~10.2.0",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~10.2.0",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~10.2.0",
    "@angular/platform-browser-dynamic": "~10.2.0",
    "@angular/router": "~10.2.0",
    "hammerjs": "^2.0.8",
    "highcharts": "^7.2.2",
    "highcharts-angular": "^2.4.0",
    "rxjs": "~6.6.3",
    "tslib": "^1.14.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.0",
    "@angular/cli": "^10.2.0",
    "@angular/compiler-cli": "~10.2.0",
    "@angular/language-service": "~10.2.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "electron": "^10.1.5",
    "electron-packager": "^15.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.2.3",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~4.0.5"
  }
}

Answer 11

This is can also be thrown when index.html does not exist.

In my case, my build folder "dist" was being ignored by electron-builder and not packaged properly into /app.

See this issue for more information

Answer 12

popClingwrap answer worked for me, but I wanted to keep the original project structure (keeping package.json at top level). As popClingwrap stated my app.asar file contained the not compiled files of my angular application. The content of the build folder was ignored.

So my approach look at little bit different.

I used the default project structure provided by angular cli.

angular.json I change the outputPath to "build", to avoide conflicts with the electron build dir.

"options": {
   "outputPath": "build"
}

Electron specific files

electron-main.js: I kept this file as is, at the top level of the project.

The pathname of the index.html was set to match the new build directory of angular.

mainWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, `/build/index.html`)
  })
);

Main package.json The most important change was done in this file. The "file" sections copies only the needed files to the electron-builder dir.

{
  ....
  "build": {
    ....
    "files": [
      "!.angular",
      "build/**",
      "!node_modules",
      "!src",
      "electron-main.js",
      "package.json"
    ]
  }
}

This did the trick from me without changing my default project structure. Many thanks to popClingwrap who got me on the right track.

Answer 13

I had the same problem. This worked for me

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