Electron - Not allowed to load local resource
Solution 1
It took a lot of trial and error but I got this working. There is a lot here that I don't totally understand, and much that might be pointless or bad practice and it might all fall down at the very next step but if, like me, you are just trying to get over the first hump then maybe something I found will help you.
I found the problem by unpacking the app.asar
file that electron-builder
produces. Instead of containing the bundled code from my dist
folder it contained all the project code (*.ts *.scss
etc). The problem was just that the packing functions were packing up the wrong stuff.
The steps to get the right source into the final app are simple when you lay them out but my god they didn't half put up a fight! Starting from where I left off in my initial question I did the following...
Remember that my project structure is the default one set up by angular-cli
Electron specific files
I moved the main.js
down into src
and changed its name to electron-main.js
just to stop any confusion with the main.ts
that is already in there. I also changed the path it references back to /index.html
.
Next I created a new application level package.json
also in src
and gave it the following content:
{
"name": "application-name",
"description": "CLI app",
"author": "Me me me",
"version": "0.0.1",
"main": "electron-main.js"
}
angular-cli.json
I changed the outDir
to build
purely because electron seems to output to dist
by default and I wanted some separation at this stage. Then I addded package.json
and electron-main.js
to the assets
array.
Main package.json
I removed the "main":"main.js"
as it is apparently no longer needed here. In scripts
I changed the test command to electron build
to point it at the build folder where the bundled code will be.
Finally, I went to the build
field and added the following content:
"directories": {
"buildResources": "build",
"app": "build"
}
Seems pretty obvious now. This just tells the compiler where to look for the assets that will make up the final app. It was defaulting to the working directory and that was my problem.
Using this setup I can now run ng build
to bundle my project into the build
folder along with the electron-main.js
and package.json
.
This done I can run npm run electron
to quickly launch a test app or npm run pack
to build an app that can be launched from Finder
.
Boom. Job done. I'll be back here in ten minutes with another annoying question I expect. Gotta love the dev these days :)
Solution 2
Problem may be the invalid path in main.js
, correct it if necessary
Solution 3
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.
Solution 4
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.
Solution 5
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.
popClingwrap
Updated on July 09, 2022Comments
-
popClingwrap almost 2 years
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 projectng 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 ofindex.html
which I set to/dist/index.html
Amend base
Inindex.html
change<base="/">
to<base="./">
Pack code
Runng build
. This puts all the packaged code in/dist
Test Run
Runnpm run electron
. This works fine. An Electron app fires up and I see the angular stuff running within it.Create App For Distribution
Runnpm 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 inFinder
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 usenpm 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
-
Eric Chu about 6 yearsis there another way to work around this than doing it this way?
-
pingze about 6 yearsurl.format() just return an url string, makes no difference.
-
Sibiraj about 6 yearsI have no clue. I have same doubts you have. but it worked.
-
TimTheEnchanter almost 6 yearsTurning off security is never an answer
-
pingze almost 6 years@TimTheEnchanter The problem is the default security options of a browser not allowed to load local resource, but Electron is not just a browser. Do you have another way?
-
pingze almost 6 yearsYou give a great practice to build an electron app. But I can't find how to solve the problem 'Not allowed to load local resource' when try to load some local files. How can you fix this?
-
Where's-the-pi over 5 yearsIs this still valid with most up-to-date angular? I don't know what you mean by "Finally, I went to the build field and added the following content: "directories": { "buildResources": "build", "app": "build" }"
-
Ethode about 5 yearsThis solves the problem because url.format is passing back a string how loadURL expects. The solution above using ticks instead of single quotes works, but so should this.
-
varun over 4 yearsD'oh! That was silly... (That moment when 25 other folks did the same mistake haha)
-
Ozzius almost 4 yearsThanks for sharing. i'm very new to EletronJS. I tried almost all the possible way to solve this issue. But after viewing your opinion. I checked my base set up & found, I didn't put any name of my workspace. So simply put a name & edit
testBuild.code.workspace
and restart VS code. All done. -
Tornike Shavishvili over 3 yearsThis was my case, i had typo in my directory :)
-
Chiragkumar Thakar over 3 years@popClingwrap this solution didn't work for me. I am able to generate exe with the help of electron + angular 10+ and also able to install it. But when i run the installed application it is getting blocked by trend micro antivirus, where in other system the antivirus is not installed that let me use that installed application. I have googled and tried multiple solutions but neither of worked.
-
Chiragkumar Thakar over 3 years@WasiF this solution didn't work for me. I am able to generate exe with the help of electron + angular 10+ and also able to install it. But when i run the installed application it is getting blocked by trend micro antivirus, where in other system the antivirus is not installed that let me use that installed application. I have googled and tried multiple solutions but neither of worked.
-
Rafael Tavares almost 3 yearsFrom Electron docs: Do Not Disable WebSecurity.