1
votes

I'm building an electron app that uses angular. However, when I try to package the app with electron-builder, I get the error:

Not allowed to load local resource: file:///C:/Users/Eric/AppData/Local/Programs/kaysi/resources/app.asar/dist/index.html

I used all the quick start of electron and electron-builder. However, I did add dist/ to make it work with

win.loadURL(url.format({
  pathname: path.join(__dirname, 'dist/index.html'),
  protocol: 'file:',
  slashes: true
}))

My app works fine if use electron . But it only happens after I run the installer.

2

2 Answers

5
votes

I was facing the same issue. NodeJs 10.13.0, Angular 7, Electron 3.0.8, Electron Builder 20.36.2

In my angular.json the default configuration for outputPath was dist

"options": {
             "outputPath": "dist/",
}

The building operation for windows in electron put all the generated content in a dist folder.

My initial though reading the error:

**Not allowed to load local resource:file:///C:/Users/Jorge/Documents/Git/CaexCommandCenter/dist/win-unpacked/resources/app.asar/dist/index.html**

was that the app.asar file does not contain any file call index.html inside dist folder.

So I installed Asar:

npm install -g asar

and proceed to verify that the file dist/index.html was packaged in app.asar

$ asar list C:/Users/Jorge/Documents/Git/CaexCommandCenter/dist/win-unpacked/resources/app.asar/ > elements_packaged.txt

I was not able to find any folder called dist packaged in the app.asar, so my conclusion was that the building process in electron, put all the content of the project, except for content in the folder where the aplication will be generated, in this case dist.

My next step was to change the value of the outputPath in the angular.json, and execute ng build:

"options": {
                        "outputPath": "angular_build/"`
}  

And then change the load path in the electron app(main.js):

var indexPath = path.resolve(__dirname, 'angular_build/index.html');
mainWindow.loadURL(indexPath);

After building everything work ok

2
votes

Ok what I ended up doing to make it work is build my angular project and in the dist folder where it outputs, create the main.js and run electron from there.