Angular 12项目加载.wasm文件报magic header not detected错误求助

Angular 12 已默认升级至 Webpack 5 进行构建，Webpack 5 原生支持 WebAssembly 模块解析，不再需要额外使用 file-loader 处理 .wasm 文件。你之前使用的 inline file-loader 导入语法会和 Webpack 5 原生的 wasm 解析逻辑冲突，导致 Webpack 拿到的文件内容不是原始 wasm 二进制，因此抛出 magic header not detected 错误。

• 移除代码中无效的 file-loader 导入行
  删除你现有代码中的如下行：

import '!!file-loader?name=wasm/fibonacci.wasm!../../wasm/fibonacci.wasm'

• 配置 Angular 静态资源拷贝规则
  打开项目根目录的 angular.json 文件，找到对应项目的配置节点 projects > [你的项目名称] > architect > build > options > assets，新增如下规则，保证打包时会把 wasm 文件拷贝到输出目录对应路径：

"assets": [
  "src/favicon.ico",
  "src/assets",
  // 新增WASM资源拷贝规则
  {
    "glob": "**/*.wasm",
    "input": "wasm/",
    "output": "/wasm/"
  }
]

如果你的 wasm 文件夹存放在 src 目录下，将 input 的值修改为 src/wasm/ 即可。

• 新增TypeScript类型声明（可选）
  如果项目出现 TypeScript 无法识别 .wasm 文件的报错，可以在 src 目录下新建 typings.d.ts 文件（已有则直接追加内容），添加如下声明：

declare module "*.wasm";

• 验证加载逻辑
  你原有代码中的 instantiateWasm 方法逻辑无需修改，打包后 .wasm 文件会被正确拷贝到 dist/[你的项目名称]/wasm/ 目录下，fetch 路径可以正常匹配到资源。

如果你使用 Emscripten 编译 WASM，编译时可添加 -s MODULARIZE=1 参数，生成的JS wrapper会更适配Angular的模块化运行环境，进一步降低加载冲突概率。

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