使用Angular 18开发Electron应用时遇IpcRenderer构建错误

问题根源 #

Angular构建环境默认是浏览器上下文，直接使用window.require('electron')会触发CommonJS模块解析错误，同时Electron API未在构建阶段正确注入，间接引发routes解构失败的异常。

解决方案 #

1. 配置TypeScript与Angular构建参数 #

• 修改tsconfig.json，在compilerOptions.types中添加node，让TypeScript识别Node.js全局变量：

  {
    "compilerOptions": {
      "types": ["node"]
    }
  }
  

• 修改angular.json，在projects.[你的项目名].architect.build.options中添加allowedCommonJsDependencies：

  {
    "allowedCommonJsDependencies": ["electron"]
  }
  

2. 安全获取IpcRenderer实例 #

避免在服务构造函数中直接加载Electron API，可选择以下两种方案：

方案A：懒加载（适用于快速调试）

修改IpcService，仅在确认处于Electron环境时加载API：

import { Injectable } from '@angular/core';
import { IpcRenderer } from 'electron';

@Injectable({
  providedIn: 'root'
})
export class IpcService {
  private ipc: IpcRenderer | undefined;

  constructor() {
    // 先判断是否在Electron渲染进程环境
    if (window.process?.type === 'renderer') {
      try {
        this.ipc = window.require('electron').ipcRenderer;
      } catch (e) {
        console.error('加载IpcRenderer失败:', e);
      }
    }
  }

  test(): void {
    this.ipc?.send("openModal");
  }
}

方案B：使用ContextBridge（Electron 12+推荐，更安全）

在Electron主进程的预加载脚本（如preload.ts）中暴露IPC方法：

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
  openModal: () => ipcRenderer.send('openModal')
});

然后在Angular的IpcService中直接调用暴露的API：

import { Injectable } from '@angular/core';

// 扩展全局window类型声明
declare global {
  interface Window {
    electronAPI: {
      openModal: () => void;
    };
  }
}

@Injectable({
  providedIn: 'root'
})
export class IpcService {
  test(): void {
    window.electronAPI?.openModal();
  }
}

同时在Electron主进程的窗口配置中指定预加载脚本：

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true // 必须开启，保证上下文隔离安全
  }
});

3. 验证构建 #

修改完成后，重新执行构建命令：

ng build

确认错误消失后，启动Electron应用测试IPC功能。

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