Angular&Electron：在默认浏览器打开链接报错求助

这个错误的根源是你直接在Angular的渲染进程代码里引入了整个electron模块，Webpack打包时会把Node.js的fs模块也打包进去，但Electron的渲染进程运行在类浏览器环境中，并没有这个Node.js核心模块，所以就抛出了这个类型错误。下面是具体的解决步骤：

正确的实现方式：通过Electron Shell API打开链接 #

Electron提供了shell.openExternal()方法专门用来打开外部链接（会调用系统默认浏览器），我们需要通过Preload脚本+上下文隔离的方式安全地把这个API暴露给Angular代码，而不是直接引入整个electron模块。

1. 编写Preload脚本 #

在项目根目录创建preload.js文件，用来暴露需要的Electron API：

const { contextBridge, shell } = require('electron');

// 向渲染进程暴露安全的API
contextBridge.exposeInMainWorld('electron', {
  shell: {
    openExternal: (url) => shell.openExternal(url)
  }
});

2. 配置主进程的BrowserWindow #

修改主进程（通常是main.js或main.ts），在创建窗口时指定preload脚本并启用上下文隔离：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 启用上下文隔离（Electron 12+默认开启）
      contextIsolation: true,
      // 指定preload脚本的绝对路径
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // 加载Angular应用（开发环境加载本地服务，生产环境加载打包后的index.html）
  mainWindow.loadURL(process.env.NODE_ENV === 'development' 
    ? 'http://localhost:4200' 
    : `file://${path.join(__dirname, '../dist/your-app-name/index.html')}`);
}

app.whenReady().then(createWindow);

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

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

3. 在Angular组件中调用API #

在你的issue.component.ts里，先声明window对象的类型（避免TypeScript报错），然后调用暴露的API：

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

// 声明window上的electron对象类型
declare global {
  interface Window {
    electron: {
      shell: {
        openExternal: (url: string) => Promise<void>;
      };
    };
  }
}

@Component({
  selector: 'app-issue',
  templateUrl: './issue.component.html',
  styleUrls: ['./issue.component.css']
})
export class IssueComponent {

  openExternalLink(url: string) {
    window.electron.shell.openExternal(url)
      .catch(err => console.error('打开链接失败:', err));
  }
}

4. 清理错误的引入 #

如果你之前在Angular代码里写了import * as electron from 'electron'，请把这行代码删掉，避免Webpack继续打包Node.js模块。

额外说明 #

如果你只是临时测试，也可以用window.open(url, '_blank')，但这种方式在Electron中可能会被安全策略拦截，或者打开Electron内置窗口而非默认浏览器，所以更推荐用shell.openExternal()的标准方式。

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