如何调试通过Electron代理的开发模式Angular应用（端口4200）

我使用Electron作为代理加载端口4200上运行的Angular应用，需要实现USB读取等操作系统原生功能。常规方式是构建Angular后将静态文件引入Electron，但我的场景需要在开发模式下调试这类原生交互代码，目前现有的方案无法解决我的问题。

项目配置详情 #

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"
  }
}

尝试的调试配置 #

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
        }
    ]
} 

当前问题 #

在Angular组件的ngOnInit方法中，if (this.electronService.isElectron)分支内的断点无法被触发：

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');
    }
  }
}

内容的提问来源于stack exchange，提问作者Davi Américo