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:\

Continue reading...