serve matrix_sdk_crypto_wasm_bg.wasm in angular v19 project - Stack Overflow

admin管理员组

文章数量:1389826

How to serve matrix_sdk_crypto_wasm_bg.wasm in angular v19? The WebAssembly file matrix_sdk_crypto_wasm_bg.wasm is not being served correctly, resulting in a 404 error. Here are the steps I have taken:

First set up the Angular project: After installing the latest Angular CLI and creating a new project named matrix-client, I installed the wasm library:

$npx @angular/cli@latest new matrix-client --no-ssr

$ng version
Angular CLI: 19.2.4
Node: 20.11.1
Package Manager: npm 10.2.4

$ npm list | grep matrix
├── @matrix-/[email protected]

Create a Crypto Service: Generate a service to handle the Matrix SDK crypto logic:

import { Injectable } from '@angular/core';
import { initAsync, Tracing, LoggerLevel, OlmMachine, UserId, DeviceId } from '@matrix-/matrix-sdk-crypto-wasm';

@Injectable({
  providedIn: 'root',
})
export class MatrixCryptoService {
  private olmMachine?: OlmMachine;

  async initCrypto(userId: string, deviceId: string) {
    await initAsync();
    new Tracing(LoggerLevel.Trace).turnOn();
    this.olmMachine = await OlmMachine.initialize(new UserId(userId), new DeviceId(deviceId));
  }
}

Use the Crypto Service in AppComponent: In appponent.ts, call the service to initialize the crypto functionality:

import { Component, OnInit } from '@angular/core';
import { MatrixCryptoService } from './matrix-crypto.service';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './appponent.html',
  styleUrl: './appponent.css'
})
export class AppComponent implements OnInit {

  constructor(private cryptoService: MatrixCryptoService) {}

  async ngOnInit() {
    await this.cryptoService.initCrypto('@user:matrix', 'DEVICE123');
    console.log(this.cryptoService.getOlmMachine());
  }
}

Error when serving the application: Upon running the application, you encounter an error in the browser's developer console:

GET http://localhost:4200/@fs/.../matrix-client/.angular/cache/19.2.4/matrix-client/vite/deps/pkg/matrix_sdk_crypto_wasm_bg.wasm [HTTP/1.1 404 Not Found 4ms]

ERROR TypeError: WebAssembly: Response has unsupported MIME type 'text/html; charset=utf-8' expected 'application/wasm'

本文标签： serve matrixsdkcryptowasmbgwasm in angular v19 projectStack Overflow