Blank screen after packing angular app using electron builder

I am trying to create a desktop application using Angular-Electron, I am using Electron-builder for packing up my application. I can view my application locally by running this command "ng build --prod && electron ." and after packaging using the command "electron-builder -w" dist folder is generated but if I try to launch the executable file I can't able view my application, instead I can see only a white page.

I can see an error message in console - not allowed to load local resource

"file:///E:/DevFiles/Angular/electronn/dist/win-unpacked/resources/app.asar/dist/electronn/index.html"

seems like index.html cannot found inside app.asar

And here is my main.js

 
 const { app, BrowserWindow } = require('electron')  
 var path = require('path')  
 //const updater= require('./updater') 
   
 let win;  
 function createWindow() {  
     //Calling updator after 3 seconds 
     //setTimeout(updater,3000)
     // Create the browser window.  
     win = new BrowserWindow({  
         width: 600,  
         height: 600,  
         backgroundColor: '#ffffff',  
     })  
     win.setMenu(null);  
   
     // I am thinking this is where the issue is
     win.loadURL(`file://${__dirname}/dist/electronn/index.html`)
     win.webContents.openDevTools()  
   
     // Event when the window is closed.  
     win.on('closed', function () {  
         win = null  
     })  
 }  
   
 // Create window on electron intialization  
 app.on('ready', createWindow)  
   
 // Quit when all windows are closed.  
 app.on('window-all-closed', function () {  
   
     // On macOS specific close process  
     if (process.platform !== 'darwin') {  
         app.quit()  
     }  
 })  
   
 app.on('activate', function () {  
     // macOS specific close process  
     if (win === null) {  
         createWindow()  
     }  
 }) 

Here my package.json

{
  "name": "electronn",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "electron": "electron .",
    "desk": "ng build --prod && electron .",
    "build-win": "electron-builder -w "
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.0",
    "@angular/cli": "~13.2.0",
    "@angular/compiler-cli": "~13.2.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "electron": "^20.1.3",
    "electron-builder": "^23.3.3",
    "electron-packager": "^16.0.0",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  },
  "author": "Rabbit",
  "repository": "https://github.com/ThiruDev50/electronn",
  "build": {
    "appId": "com.rabit.electronn",
    "win": {
      "publish": [
        {
          "provider": "github"
        }
      ]
    }
  }
}

I struck in this issue for almost a week, tried multiple approach but no luck. What I am missing? Please pour your suggestion. Thanks in advance.

Finally I solved this !. The problem is after packing our app with electron builder, dist folder is missing inside app.asar file, so application cannot able to find the starting path. I found a way and that is actually working.

Step 1 : In your angular.json file change your output path to out/{your-app-name} in my case out/eelctronn

"outputPath": "out/electronn"

Step 2 : Change the path of loadUrl in main.js file as below

win.loadURL(`file://${__dirname}/out/electronn/index.html`)

Step 3 : Now run this command ng build --prod && electron-builder -w , this will first build angular app inside out folder and then it will pack inside dist folder using electron.

Hope this works, I faced this issue for 2 weeks, later I unzipped app.asar file and tried various things then found this working solution