构建Angular CLI项目时无法解析包中的原生模块

背景 #

我正在开发一款Electron内嵌Angular CLI的应用，用户可通过基础Web控件操作，将事件通过模拟虚拟控制器输出（如滑动滑块对应虚拟控制器轴变更）。为实现虚拟控制器功能，引入了封装原生虚拟控制器功能的node-ViGEmClient包。

问题详情 #

创建基础项目并导入该包后，执行ng build构建时出现如下错误：

./node_modules/vigemclient/lib/DS4Controller.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\deskpad\node_modules\vigemclient\lib'

追踪发现错误来自包内相关文件，查看包结构可知，它本应寻找build/Release下的vigemclient.node文件，且该文件确实存在，但Angular构建时无法解析，怀疑需配置webpack等，但不知具体操作，寻求指导。

项目环境信息 #

• Node: v16.17.0
• Angular CLI: v14.2.3

复现步骤 #

• 创建新Angular CLI项目：ng new testProj
• 安装ViGEmClient包：npm install vigemclient（注：安装时需Node相关C++编译库）
• 在tsconfig.json中添加："allowSyntheticDefaultImports": true,
• 在默认组件中引入包并使用：

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'vigTestAngular';
client = new ViGEmClient();
}

• 执行npm run build构建项目

实际结果 #

出现多个类似错误，均提示无法解析../build/Release/vigemclient模块的内容。

这个问题的核心是Angular默认的webpack配置不会处理.node这类原生Node.js模块，而node-ViGEmClient依赖这样的原生模块来实现功能。同时因为你是在Electron环境中使用，还要兼顾Electron的模块解析逻辑，下面是具体的解决步骤：

1. 安装自定义webpack构建工具 #

首先我们需要用@angular-builders/custom-webpack来扩展Angular的默认webpack配置，执行：

npm install --save-dev @angular-builders/custom-webpack

2. 创建自定义webpack配置文件 #

在项目根目录新建webpack.config.js，写入以下配置：

module.exports = {
  resolve: {
    // 让webpack能够识别.node扩展名的文件
    extensions: ['.node'],
    alias: {
      // 给vigemclient的原生模块设置别名，确保webpack能找到它
      'vigemclient-native': require.resolve('vigemclient/build/Release/vigemclient.node')
    }
  },
  module: {
    rules: [
      {
        // 用node-loader处理.node文件
        test: /\.node$/,
        loader: 'node-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ]
  }
};

3. 安装node-loader #

这个loader专门用于处理Node.js的原生模块文件，执行：

npm install --save-dev node-loader

4. 修改Angular的构建配置 #

打开angular.json，找到architect下的build和serve配置，替换默认的builder，并引入我们的自定义webpack配置：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留你原来的其他build配置（比如outputPath、index、main等）
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留你原来的其他serve配置
    }
  }
}

5. 调整Electron的窗口配置（关键） #

因为你是Electron内嵌Angular，还要确保Electron允许渲染进程访问Node.js模块。在Electron的主进程文件（比如main.js）中，修改BrowserWindow的webPreferences：

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

const mainWindow = new BrowserWindow({
  webPreferences: {
    // 允许渲染进程使用Node.js API
    nodeIntegration: true,
    contextIsolation: false,
    // 如果你的项目启用了contextIsolation，建议用预加载脚本暴露需要的API
    // preload: path.join(__dirname, 'preload.js')
  }
});

6. 验证构建 #

现在执行npm run build，应该就能成功解析vigemclient.node模块了。如果还是有问题，可以尝试直接在组件中导入模块的完整路径：

import ViGEmClient from 'vigemclient/lib/index';

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