在Angular 5与TypeScript中使用nbind遇到问题求助

我之前在Angular里集成nbind的C++模块时也踩过几乎一模一样的坑，Node环境下顺畅无比，一到浏览器端就各种报错。下面是我亲测有效的解决步骤：

1. 先把C++模块编译成WebAssembly（关键！） #

nbind默认编译的是Node.js专属的.node原生模块，这种文件在浏览器环境里根本跑不起来。你得改用Emscripten把代码编译成WebAssembly：

• 先安装并配置好Emscripten环境
• 修改项目里的构建脚本，比如在package.json的scripts里改成类似这样：

  "build:wasm": "emcc your-source-file.cpp -o your-module.js -s EXPORTED_FUNCTIONS=['_sayHello'] -s MODULARIZE=1 -s EXPORT_ES6=1 --bind"
  

  这里的--bind是nbind配合Emscripten的核心参数，同时要明确导出你需要调用的函数（比如示例里的_sayHello）。

2. 调整Angular的Webpack配置 #

Angular默认的Webpack配置不会处理WebAssembly文件，还会对动态模块引用抛出警告。得自定义配置来兼容：

• 先安装自定义构建工具：

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

• 在项目根目录新建custom-webpack.config.js，添加以下内容：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.wasm$/,
          type: 'webassembly/async',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ['.wasm', '.js', '.json'],
      fallback: {
        // 屏蔽Node环境专属的模块，避免Webpack报错
        "fs": false,
        "path": false,
        "crypto": false
      }
    },
    experiments: {
      asyncWebAssembly: true
    }
  };
  

• 修改angular.json，把默认构建器换成自定义Webpack：
  找到projects -> 你的项目名 -> architect -> build，把builder改成@angular-builders/custom-webpack:browser，并添加配置路径：

  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 保留原有的其他配置...
    }
  }
  

  同样，把serve的builder也改成@angular-builders/custom-webpack:dev-server。

3. 异步加载WebAssembly模块（别同步导入！） #

浏览器加载WebAssembly是异步过程，不能像导入普通JS模块那样同步操作：

• 在AppComponent里改成异步加载并初始化：

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    private wasmApi: any;
  
    async ngOnInit() {
      // 注意路径要指向你编译生成的.js文件
      this.wasmApi = await import('../assets/your-module.js');
      // 初始化nbind绑定的模块
      await this.wasmApi.default();
    }
  
    async sayHello() {
      if (this.wasmApi) {
        // 调用C++里的sayHello函数
        this.wasmApi.sayHello();
      }
    }
  }
  

4. 验证修复效果 #

完成以上步骤后，重新构建并启动开发服务器：

ng build && ng serve

现在再点击按钮，应该能正常触发C++函数了，「依赖请求为表达式」的警告也会消失。

内容的提问来源于stack exchange，提问作者Kay van Bree