Intento cargar .wasm en mi proyecto de esa manera, funciona para angular 5 pero aparece un error cuando está en angular 12
Blockquote ./node_modules/file-loader/dist/cjs.js?name=wasm/fibonacci.wasm!./wasm/fibonacci.wasm - Error: error en el análisis del módulo: encabezado mágico no detectado
import { Injectable } from '@angular/core' import { Observable, BehaviorSubject } from 'rxjs' import { filter, map } from 'rxjs/operators' import * as Module from './../../wasm/fibonacci.js' import '!!file-loader?name=wasm/fibonacci.wasm!../../wasm/fibonacci.wasm' @Injectable() class WasmService { module: any wasmReady = new BehaviorSubject<boolean>(false) constructor() { this.instantiateWasm('wasm/fibonacci.wasm') } private async instantiateWasm(url: string) { // fetch the wasm file const wasmFile = await fetch(url) // convert it into a binary array const buffer = await wasmFile.arrayBuffer() const binary = new Uint8Array(buffer) // create module arguments // including the wasm-file const moduleArgs = { wasmBinary: binary, onRuntimeInitialized: () => { this.wasmReady.next(true) }, } // instantiate the module this.module = Module(moduleArgs) } public fibonacci(input: number): Observable<number> { return this.wasmReady.pipe(filter(value => value === true)).pipe( map(() => { return this.module._fibonacci(input) }) ) } }
Para poder cargar un archivo wasm, hay algunos requisitos,
Al principio, debe asegurarse de que su servidor web informe el tipo mime de los archivos wasm como 'aplicación/wasm'.
A continuación, deberá poder cargar el archivo .wasm en su aplicación angular.
si usa webpack <4, puede usar https://www.npmjs.com/package/wasm-loader y no file-loader. en webpack5, esa es la batería incluida.