[Bug] decodeImageFrameWorker.js file does not exist, volumeLoader.loadVolume promise not resolving

[wlorencesancsoft]

Describe the Bug

I am seeing issues since upgrading to Cornerstone 2.1.5 and trying to follow the migration guide. I am running using Angular 18 for the front-end framework.

When initializing the Cornerstone DICOM Image Loader, it cannot find the decodeImageFrameWorker.js file. I have the following code for initialization.

if (cornerstone.init()) {
    cornerstoneDICOMImageLoader.init({});
}

For every webworker, I then get the following message in the console:
The file does not exist at "C:/cornerstone-test/.angular/cache/18.2.11/cornerstone-test/vite/deps/decodeImageFrameWorker.js?worker_file&type=module" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude\`.

When my code later reaches the volume loader and tries to load a volume, it hangs forever. The promise returned from the loadVolume function never resolves nor errors out.

I am registering the volume loader and then trying to load my volume like this

cornerstone.volumeLoader.registerVolumeLoader(
    'myvolumescheme',
    cornerstone.cornerstoneStreamingImageVolumeLoader as any
    // cornerstone.CornerstoneStreamingImageVolumeLoader does not exactly match the
    // cornerstone.Types.VolumeLoaderFn definition and must be cast to avoid typescript
    // compiler errors
);
const imageUrls = [
   ... wadouri image urls ...
];
cornerstone.volumeLoader.loadVolume('myvolumescheme: myvolume', { imageIds: imageUrls })
    .then((value) => { console.log(value); debugger; })      // neither (then) nor (catch) are ever reached
    .catch((error) => { console.error(error); debugger; });

I suspect that the issues are related - the volume loader likely can't load the volume because the Cornerstone DICOM image loader didn't initialize correctly. When I revert back to Cornerstone 1.86, neither of these issues occur.

Steps to Reproduce

1. Initialize cornerstone
2. Initialize cornerstoneDICOMImageLoader
3. Register volume loader
4. Load volume

The current behavior

Initializing the cornerstoneDICOMImageLoader is resulting in console messages saying that it cannot find the decodeImageFrameWorker.js file.
The file does not exist at "C:/cornerstone-test/.angular/cache/18.2.11/cornerstone-test/vite/deps/decodeImageFrameWorker.js?worker_file&type=module" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.

Trying to then load a volume with the volume loader returns a promise object that never resolves and never errors out.

The expected behavior

The decodeImageFrameWorker.js file should be found and the volume loader's promise should either resolve or throw an error.

OS

Windows 11

Node version

20.15.1

Browser

Chrome 130.0.6723.70

[sedghi]

Yeah something is going on with Angular, our recipes for vite, react and vue, nextjs works https://www.cornerstonejs.org/docs/getting-started/vue-angular-react-etc

see if you can take something out of them, i see our angular recipe does not work as i see

[sedghi]

I'm wondering if this is related

[mhmmd7777]

Any updates?

[sedghi]

Angular uses Vite, and our Vite setup functions in both development and build modes, so please adjust to Angular accordingly.

https://github.com/cornerstonejs/vue-cornerstone3d