我试图像这样将.wasm加载到我的项目中,这对于Angular 5有效,但在Angular 12中出现错误:
引用./node_modules/file-loader/dist/cjs.js?name=wasm/fibonacci.wasm!./wasm/fibonacci.wasm - 错误:模块解析失败:未检测到魔术头
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)
})
)
}
}