Not allowed to load local resource

[isurendrasingh]

• Electron Version: 2.0.3
• Operating System (Platform and Version): Windows 10 64-bit

Expected Behavior
When the app launches, it displays the Angular 6 index page. But when the reload is done it displays the following error in console "Not allowed to load local resource".

When the reload is done, it shows:

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[jabreuar]

I got the same bug. how do we fix it? I had tried several approaches

[isurendrasingh]

@jabreuar Don't know how to fix this. And no reply from developer team. Opened this issue a month ago and no update

[isurendrasingh]

@Robbyn666 not working!! I have edited the package.json inside node_modules/electron/package.json, the "directories": { "output": "release/" } was inside this package.json. But the error is same.

This is the error i'm getting after reloading:
Not allowed to load local resource: file:///C:/Electron/angular-electron/dist/angular-electron/

[isurendrasingh]

@Robbyn666 Still not getting it. This is my package.json
{ "name": "angular-electron", "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": "electron .", "electron-build": "ng build --prod && electron ." }, "private": true, "dependencies": { "@angular/animations": "^6.1.0", "@angular/common": "^6.1.0", "@angular/compiler": "^6.1.0", "@angular/core": "^6.1.0", "@angular/forms": "^6.1.0", "@angular/http": "^6.1.0", "@angular/platform-browser": "^6.1.0", "@angular/platform-browser-dynamic": "^6.1.0", "@angular/router": "^6.1.0", "core-js": "^2.5.4", "rxjs": "^6.0.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.7.0", "@angular/cli": "~6.1.2", "@angular/compiler-cli": "^6.1.0", "@angular/language-service": "^6.1.0", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", "electron": "^2.0.6", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.3.0", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~2.7.2" } }
In which object do i add "directories": { "output": "release/" } ??

[isurendrasingh]

@Robbyn666 Well i'm loading like this
win.loadURL(file://${__dirname}/dist/angular-electron/index.html);

But i'm trying to load it like yours but getting error url not defined. Can you update the code of url?

[jabreuar]

@isurendrasingh I am using a quick start angular+electron from https://github.com/maximegris/angular-electron

[alwaysloseall]

@isurendrasingh
Add this configuration when you instantiate the BrowserWindow.

new BrowserWindow({
  webPreferences: {
    webSecurity: false
  }
});

[whyboris]

confirming @alwaysloseall has the solution when using angular-electron
Thank you!

[tyrants666]

I tried to fix this my whole day & finally found the solution,

"build": { "appId": "myledgerapp", "extends": null, "files": [ "./build/**/*", "./public/electron.js" ] }
We need to add files in build section where electron.js is my entry point.

[SangNguyen2810]

@alwaysloseall I am using react with electron and your solution works too, thanks a lot.

[btxtiger]

@tyrants666 which file is this?

[InventorSingh]

I solved this problem by loading the file like this:
win.loadURL(
url.format({
pathname: path.join(__dirname, /dist/app-name/index.html),
protocol: "file:",
slashes: true
})
);

Also, make sure in angular.json file, you have the right "outputPath": "dist/app-name",

[MutableLoss]

You can also receive this generic error message when the file passed to the loadURL method is missing. If you're running into this on production, it's worth double checking your build files. Unless I'm overlooking something specific to Angular, you shouldn't ever be forced to disable webSecurity.

[Mrinalaot]

Getting ERROR - "Not allowed to load local resource" after building my angular application when hosting with Github pages.
But with "ng serve" it is working fine in my local.
Build command - ng build --prod --output-path docs --base-href /user-management/
Hosting /docs with github pages.
Please suggest!!!!!!!!!!! ☺

[btxtiger]

@Mrinalaot for me it was some config in the package.json. I don't remember what exactly. But try to remove everything but dependencies, dev-dependencies, scripts, and add the rest step by step

[VictorGorban]

@isurendrasingh
Add this configuration when you instantiate the BrowserWindow.

new BrowserWindow({
  webPreferences: {
    webSecurity: false
  }
});

Yes, It does resolve the file:// problem. You are a world savior)

[MRVirus007]

@isurendrasingh I do not know where my contribution is, but we solved the problem by changing the output folder. Then the problem was gone.

package.json

"directories": { "output": "release/" }

Thanks man, You're our hero.

[alexthelion]

Worked for me:
build: {
"directories": { "output": "release/" }
Other build config....
}

[mqliutie]

Worked for me: build: { "directories": { "output": "release/" } Other build config.... }

Hi bro, where shoud I add this code? I am using electron-builder to pack my app. filesfield includes:

"files": [
    "dist/",
    "build/"
]

[chrismarino23]

I tried to fix this my whole day & finally found the solution,

"build": { "appId": "myledgerapp", "extends": null, "files": [ "./build/**/*", "./public/electron.js" ] } We need to add files in build section where electron.js is my entry point.

Still working bro, nice move!