[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

[AjaySathyapalan]

I'm in the process of migrating from the old Cornerstone version and rendering stack images, but I'm still encountering the same error. Is there any update on making it compatible with Angular? I hope Cornerstone will provide official support for Angular projects in the future as well

[AjaySathyapalan]

I'm in the process of migrating from the old Cornerstone version and rendering stack images, but I'm still encountering the same error. Is there any update on making it compatible with Angular? I hope Cornerstone will provide official support for Angular projects in the future as well

@sedghi is there any update? Thanks in advance

[sedghi]

No angular update unfortunatelly

[AjaySathyapalan]

No angular update unfortunatelly

@sedghi

I apologize for any misunderstanding earlier. I just wanted to clarify is Cornerstone3D will discontinue support for Angular?

If that’s the case, would it still be possible to use the legacy Cornerstone version for an extended period? I am a bit unclear about the details and would appreciate your guidance.

[sedghi]

We need community contributions here. We've made it compatible with Vue, React, and anything Vite-based. However, Angular has migrated their CLI to Vite without allowing configuration. What can I say?

Something you can do is to create an issue on their GitHub and say this library works with everything else except Angular.

[daemon29]

@sedghi The issue lies within
const workerFn = () => { const instance = new Worker(new URL('./decodeImageFrameWorker.js', import.meta.url), { type: 'module' }); return instance; };
at @cornerstonejs/dicom-image-loader/dist/esm/init.js

The worker run on the static file 'decodeImageFrameWorker.js', but it doesn't include during serve via webpack/localhost. |
Do you know how to solve this problem?
I have tried to copy dicom-image-loader into assets folder, so it will be included as static file during serve. But it doesnt work

[daemon29]

I have resolved the issue for Angular CLI. Someone already made a pull request to fix the problem at cornerstonejs/angular-cornerstone3d#2
@AjaySathyapalan @wlorencesancsoft

[sedghi]

I have resolved the issue for Angular CLI. Someone already made a pull request to fix the problem at cornerstonejs/angular-cornerstone3d#2

@AjaySathyapalan @wlorencesancsoft

Can you post your solution here?

[daemon29]

@sedghi The error no longer appear in the console, but the image appear in grey. So it is not entirely fixed. The code seem start fetching the image, but fail to display, and only display a grey rectangle. And a bunch of warning