serve matrix_sdk_crypto_wasm_bg.wasm in angular v19 project

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 WSM 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-org/matrix-sdk-crypto-wasm@14.0.1


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-org/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 app.component.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: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {

constructor(private cryptoService: MatrixCryptoService) {}

async ngOnInit() {
await this.cryptoService.initCrypto('@user:matrix.org', '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'
​

Continue reading...