I can not load Angular application as Electron application

Angular is recommended approach to develop Electron application (second is VUE), this means there are no something unusual to load Angular application as Electron, of course need to use another tsconfig.electron.json, and correctly set up "main" entry point in package.json
So, my package.json related to Electron is

{
 "main":  "./out-tsc/electron-main/electron-main.js",
 "name": "angular-electron1",
 "scripts": {
   "build:angular": "ng build",
   "build:electron-main": "tsc -p tsconfig.electron.json",
   "build:all": "ng build && tsc -p tsconfig.electron.json",
   "electron:start": "npm run build:angular && npm run build:electron-main && npx cross-env NODE_ENV=development electron .",
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "watch": "ng build --watch --configuration development",
   "test": "ng test"
 },

my tsconfig.electron.json is

 {
   "extends": "./tsconfig.json", 
   "compilerOptions": {
   "module": "CommonJS", 
   "outDir": "./out-tsc/electron-main" 
 },
"include": ["src/electron/preload.ts", "src/electron-main.ts"],
"exclude": ["src/angular-main.ts", "src/**/*.spec.ts", "src/app/**/*.ts"]
}

also I have add one attribute to angular.json

"options": {
   "baseHref": "/" ,

Angular code produced result with my configuration to folder E:\Angular\AngularElectron1\AngularElectron1\dist\angular-electron1\browser and working absolutely perfectly. Angular application looks as files

  favicon.ico
  index.html
  main-KPJ5OKOH.js
  polyfills-FFHMD2TL.js
  styles-5INURTSO.css

Also I have add to html minimum security

    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self';">

And now I want to start this Angular application as Electron, nothing unusual, isn't it? Just only recommended approach to develop Electron application. In this case I want to start absolutely basic code, even without preload.js. So, I used just this Electron starter src\electron-main.ts

 import { app, BrowserWindow } from 'electron';
 import * as path from 'path';
 let win: BrowserWindow | null;
 const createWindow = () => {
     win = new BrowserWindow({
         width: 800,
         height: 600,
         webPreferences: {
             nodeIntegration: true,
             contextIsolation: false, 
         },
     });
     const indexPath = path.resolve(process.cwd(), 'dist', 'angular-electron1', 'browser', 'index.html');
     win.loadFile(indexPath);
     win.on('closed', () => {
         win = null;
     });
 };
 app.on('ready', createWindow);
 app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') app.quit();
 });
 app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) createWindow();
 });

nothing wrong, I just want to start my Angular apps as Electron window, isn't it? But I have absolutely unexpected result, Electron application don't understand where is root of my application

 GET file:///E:/styles-5INURTSO.css net::ERR_FILE_NOT_FOUND 
 GET file:///E:/polyfills-FFHMD2TL.js net::ERR_FILE_NOT_FOUND 
 GET file:///E:/main-KPJ5OKOH.js net::ERR_FILE_NOT_FOUND

Of course, root of my application is Angular root E:\Angular\AngularElectron1\AngularElectron1\dist\angular-electron1\browser, Why Electron thinking that root of my application is root of disk E:\

Solution

GET file:///E:/main-KPJ5OKOH.js net:ERR_FILE_NOT_FOUND

This kind of error usually happens when your index.html uses absolute paths to scripts, styles, etc., like /main-KPJ5OKOH.js. Electron will look for the file in the system's (or drive's) root directory. The same issue occurs when you have <base href="/"> in index.html.

What you can do is setting the the base path to something like . or ./ either in your angular.json, index.html, or via build flag:

ng build --base-href .