Not allowed to load local resource error when using wasm-gzip in Angular app

I have an Angular 16 app using webpack 5+. I need to compress/decompress gzip files and thought I would try a WebAssembly library for performance reasons. However, i'm running into some errors.

I installed wasm-gzip using npm I created a few static functions to compress/decompress gzip data.

import init, { compress, decompress } from 'wasm-gzip';

import { ArrowColumnMap } from '../store/encounters/arrow-column-map';
import { blobToByteArray, convertArrayToJsonBlob, convertArrayToJsonString } from './array-utils';

export class GzipDataTools {

public static async compressArrayToGzipBlob(data: any[]): Promise<Blob> {
const jsonString = convertArrayToJsonString(data, 100_000);
await init();
const compressedJson = compress(jsonString);
const compressedResponse = await new Response(compressedJson);
return compressedResponse.blob();
}

public static async decompressGzipBlobToJson2(blob: Blob): Promise<any> {
const byteArray = await blobToByteArray(blob);
await init();
const decompressedStream = decompress(byteArray);
const result = await new Response(decompressedStream).json(); // .then((data) => data);
return result;
}
}


When i run the app, I get this error:

It seems as if the code is not getting packaged by webpack since it's trying to load the local file. I tried adding the wasm-gzip package code to the assets folder, but that didn't work either.

Any ideas?

Continue reading...