Electron - Not allowed to load local resource
Problem may be the invalid path in main.js
, correct it if necessary
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 :)