How to debug electron with angular running on port 4200

I'm using electron as a proxy to show the content from port 4200 (angular) and to manage native features from user SO (as usb reading etc). I know the common way is build angular then reference static files to electron but my angular app is communicating with user operating system through electron then I need to debug angular on development mode comunicating with user SO through electron because that the url below doesn't solve my problem:

How to debug an app with Electron and Angular from Visual Studio Code?

Below are my project settings:

Electron main.js:

const { app, BrowserWindow } = require('electron');
const path = require('path');


const isDev = process.env.NODE_ENV === 'development' || process.argv.includes('--dev');

function createWindow() {
const mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
});


if (isDev) {
console.log('Development mode: proxying angular at port 4200...');
mainWindow.loadURL('http://localhost:4200');
mainWindow.webContents.openDevTools();
} else {
console.log('Production mode references html,css,js built files from angular...');

const indexPath = path.join(__dirname, 'dist', 'rfid-desktop', 'browser', 'index.html');
console.log('Caminho do index.html:', indexPath);
mainWindow.loadFile(indexPath);
}
}

app.whenReady().then(() => {
createWindow();

app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});

app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});


package.json:

{
"name": "rfid-desktop",
"version": "0.0.0",
"description": "Aplicação desktop RFID",
"author": "RFID Team",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "npm run electron:start",
"build": "npm run electron:build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"electron:dev": "wait-on tcp:4200 && electron . --dev",
"electron:start": "concurrently \"ng serve\" \"wait-on tcp:4200 && electron . --dev\"",
"electron:build": "ng build --base-href ./ && electron-builder"
},
"private": true,
"dependencies": {
"@angular/animations": "^19.1.0",
"@angular/common": "^19.1.0",
"@angular/compiler": "^19.1.0",
"@angular/core": "^19.1.0",
"@angular/forms": "^19.1.0",
"@angular/platform-browser": "^19.1.0",
"@angular/platform-browser-dynamic": "^19.1.0",
"@angular/router": "^19.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"usb": "^2.15.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.1.6",
"@angular/cli": "^19.1.6",
"@angular/compiler-cli": "^19.1.0",
"@types/jasmine": "~5.1.0",
"concurrently": "^8.2.2",
"electron": "^29.1.0",
"electron-builder": "^24.9.1",
"jasmine-core": "~5.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.7.2",
"wait-on": "^7.2.0"
}
}


What I tried:

launch.json:

{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Angular + electron",
"type": "node",
"request": "attach",
"port": 4200,
"preLaunchTask": "npm: start"
}
]
}


Tasks.json:

{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"label": "npm: start",
"isBackground": true
}
]
}


The problem is breakpoint is not being triggered on ngOnit:

export class AppComponent {
desktopFiles: string[] = [];

constructor(private electronService: ElectronService) {}

ngOnInit() {
if (this.electronService.isElectron) {
const fs = this.electronService.fs;
const path = this.electronService.path;
const os = this.electronService.os;

const desktopPath = path.join(os.homedir(), 'Desktop');
console.log('Desktop path:', desktopPath);

try {
const files = fs.readdirSync(desktopPath);
this.desktopFiles = files;
console.log('Found files:', files);
} catch (error) {
console.error('Error reading desktop files:', error);
}
} else {
console.log('Electron is not running');
}
}
}

Continue reading...