Angular Electron应用中new BrowserWindow()位置及DevTools启用问题

1. 定位 new BrowserWindow() 的位置 #

Angular+Electron架构里，窗口创建逻辑不在Angular业务代码中，而是放在Electron主进程文件里。通常是项目根目录下的main.ts，或是electron/main.ts（取决于项目初始化方式）。

找不到的话，直接看package.json里的main字段，它明确指定了Electron主进程的入口文件，比如：

"main": "electron/main.js"

对应的TypeScript源文件就是electron/main.ts，窗口创建的代码一定在这里。

2. 修改 BrowserWindow 配置（contextIsolation、DevTools） #

找到主进程文件后，调整new BrowserWindow()的配置项即可，示例代码如下：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // 关闭contextIsolation（若需渲染进程直接访问Node API）
    contextIsolation: false,
    // 开启Node集成（配合contextIsolation关闭使用）
    nodeIntegration: true,
    // 强制启用DevTools
    devTools: true
  }
});

// 可选：启动时自动打开DevTools
mainWindow.webContents.openDevTools();

// 加载Angular项目地址
mainWindow.loadURL('http://localhost:4200'); // 开发环境
// 生产环境替换为：mainWindow.loadFile('dist/你的项目名/index.html');

3. 解决npx electron从上级目录启动的问题 #

Windows下npx会优先遍历上级目录的node_modules，导致启动路径错误。解决方式：

• 直接指定当前项目的Electron路径执行：

  .\node_modules\.bin\electron
  

• 在package.json的scripts里添加启动命令，执行npm run electron会自动使用当前项目依赖：

  "scripts": {
    "electron": "electron ."
  }
  

• 若依赖安装有异常，删除当前项目的node_modules和package-lock.json，重新执行：

  npm install --save-dev electron
  

4. DevTools无法启用的额外检查 #

• 排查主进程代码中是否存在mainWindow.webContents.closeDevTools()这类强制关闭的代码，直接删除即可。
• 开发环境下，确保先启动Angular项目（ng serve），再启动Electron，避免加载地址无效导致DevTools无法正常触发。

内容的提问来源于stack exchange，提问作者Viacheslav