如何在Angular 19中正确部署matrix_sdk_crypto_wasm_bg.wasm文件？

1. 配置 Angular 资产复制规则 #

Angular 默认仅复制 src/assets 目录下的文件到构建产物，需手动配置将 node_modules 中的 wasm 文件打包到构建目录：

• 打开项目根目录的 angular.json
• 在 architect > build > options > assets 数组中添加以下配置：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "matrix_sdk_crypto_wasm_bg.wasm",
    "input": "./node_modules/@matrix-org/matrix-sdk-crypto-wasm/",
    "output": "./assets/wasm/"
  }
]

该配置会将 wasm 文件复制到构建后的 assets/wasm 目录下。

2. 指定 SDK 加载 wasm 的正确路径 #

初始化加密 SDK 时，需手动指定 wasm 文件的访问路径，避免默认路径错误：

import { initCrypto } from '@matrix-org/matrix-sdk-crypto-wasm';

export class MatrixCryptoService {
  async init() {
    await initCrypto({
      // 指向构建后的 wasm 文件路径
      locateFile: (filename: string) => `/assets/wasm/${filename}`
    });
    // 其他加密逻辑初始化
  }
}

3. 配置 MIME 类型 #

开发环境（Angular Dev Server） #

在 angular.json 的 architect > serve > options 中添加 MIME 类型配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "matrix-client:build",
    "mimeTypes": [
      {
        "extension": "wasm",
        "mimeType": "application/wasm"
      }
    ]
  }
}

生产环境（以 Nginx 为例） #

在 Nginx 配置文件中添加 wasm 的 MIME 类型映射：

types {
    application/wasm wasm;
}

4. 清理缓存并重新构建 #

执行以下命令清理旧构建产物并重新打包，避免缓存导致的路径问题：

ng clean
ng build

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