Issue with Demo Project - Empty Viewport

[francescoderose]

HI,

I’ve tried launching the demo project, but unfortunately, the viewport remains empty every time. I’ve followed the instructions, but the issue persists. Could anyone provide guidance on how to resolve this?

Thank you for your availability and the great work on this project!

[EugeneQilo]

@sedghi any chance you can get this repo to render? I'm getting same results as @francescoderose

[sedghi]

Angular uses vite as far as i know, you can take a look at the vite recipe here which seems to work both in prod and dev

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

https://github.com/cornerstonejs/vite-react-cornerstone3d

[francescoderose]

@sedghi Vite shouldn’t be natively compatible with Angular. Is it essential for the functionality, or could we consider another approach? Thank you

[sedghi]

I'll check this in about two weeks. I'm currently busy with other tasks, but since Angular uses Vite, it should work the same way.

[EugeneQilo]

@sedghi Vite or Webpack, it is giving the same issue... The issue is when decodeImageFrameWorker is run as a Worker... The path of import.meta.url is populating as a local file://xxxx path instead of a server path. Not sure if this is something you have faced before and know the answer to.

const instance = new Worker(
new URL('./decodeImageFrameWorker.js', import.meta.url),
{ type: 'module' }
);

[Sinarab]

I'm having tha same issue here. Trying to find a workaround however still stuck, like @sedghi said this seams to be a problem the way vite bundles on a angular app.

Have anyone another solution for this?

[sedghi]

try excluding the dicomimageLoader pacakge from vite optimization, as here https://github.com/cornerstonejs/vite-react-cornerstone3d/blob/main/vite.config.ts

[Sulaiman2018]

Hi, has anyone found a solution to this issue? I'm experiencing the same behavior where the viewport remains empty when trying to launch the demo project. Any ideas or solutions would be really appreciated!

Thanks in advance.

[sgielen]

Please try the following things and report back whether any of this seems to help:

• Ensure you're using Vite 5
• Ensure you're using the most recent Cornerstone3D version
• Use the vite-plugin-commonjs plugin as described in this comment or this example or this example
• Set optimizeDeps according to this comment or this example or this example
• Set a Vite worker format according to this example

[daemon29]

I have tried the vite config for Angular, but it doesnt make any result

[sedghi]

I think the issue is angular does not let you modify the vite config ...
angular/angular-cli#26859

You can give another thumbs down on that comment too ...

So maybe the webpack builder is the way to go

[sedghi]

I guess we need to use this one, https://github.com/just-jeb/angular-builders/tree/master/packages/custom-esbuild but right now we don't have priority for it

[sedghi]

See this as well

• https://stackoverflow.com/questions/77421774/vites-optimizedeps-include-doesnt-work-with-relative-paths
• https://github.com/search?q=repo%3Aangular%2Fangular-cli+optimizedeps&type=issues
• Vite dev server with npm workspaces not reloading on project reference update angular/angular-cli#27552

Maybe we could do something around this

https://github.com/angular/angular-cli/blob/20411f696eb52c500e096e3dfc5e195185794edc/packages/angular/build/src/builders/dev-server/vite-server.ts#L759-L772

[sedghi]

As i said, we need to open an issue on angular-cli and ask them how to do this, since all the other vite based recipes can already dev/build