在Angular中集成Rust WASM时调用Rust函数出现__wbindgen_free未定义错误求助

嘿，我注意到你在Angular里集成Rust WASM时碰到了__wbindgen_free未定义的错误，先确认下你的操作流程是不是这样的：

• 安装wasm-pack工具：cargo install wasm-pack
• 创建Rust库项目：cargo new --lib my-rust-wasm
• 你的src/lib.rs代码如下：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet() -> String {
    "Hello from Rust!".to_string()
}

• 执行构建命令：wasm-pack build --target web

这个错误其实很常见，本质是Angular没有正确加载wasm-pack生成的辅助JS文件，导致内存管理相关的辅助函数找不到。下面给你几个具体的解决步骤：

1. 正确转移构建产物到Angular项目 #

构建完成后，你的Rust项目根目录下会生成pkg文件夹，里面包含my_rust_wasm_bg.wasm、my_rust_wasm.js、类型声明文件等关键文件。把整个pkg文件夹复制到Angular项目的src/assets目录下（或者你习惯的静态资源存放路径）。

2. 用动态导入的方式加载WASM模块 #

不要直接在Angular组件里import wasm文件，而是通过动态导入加载wasm-pack生成的JS入口文件，比如在你的组件TS代码里这么写：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  async ngOnInit() {
    try {
      // 动态导入Rust WASM的JS入口文件
      const rustWasmModule = await import('../assets/pkg/my_rust_wasm');
      // 调用Rust里的greet函数
      const message = rustWasmModule.greet();
      console.log('来自Rust的问候：', message);
    } catch (error) {
      console.error('加载WASM模块失败：', error);
    }
  }
}

3. 调整Angular的打包配置（按需） #

如果Angular打包时出现资源找不到的问题，需要修改angular.json配置，把pkg目录加入到静态资源列表中：
在architect -> build -> options -> assets数组里添加：

{
  "glob": "**/*",
  "input": "src/assets/pkg",
  "output": "./assets/pkg"
}

另外，检查你的tsconfig.json，确保开启了"allowJs": true，并且"moduleResolution": "node"，这样TypeScript才能正确识别JS模块的导入。

4. 尝试更换wasm-pack的构建目标 #

你当前用的--target web是面向纯原生Web环境的，在Angular这种基于webpack的打包环境下，换成--target bundler可能更适配，它生成的代码会更友好地支持打包工具：

wasm-pack build --target bundler

重新构建后，把新生成的pkg文件夹替换到Angular项目里，再尝试加载。

这个错误的核心原因就是__wbindgen_free这类函数是wasm-bindgen自动生成的辅助函数，存在于wasm-pack输出的JS文件中，只要确保正确加载了这个JS文件，而不是直接加载wasm文件，问题基本就能解决啦。

备注：内容来源于stack exchange，提问作者New User