vtk.js with Angular12

Web
1

Hi I am trying to add vtk.js window to Angular 12 component. I am following the procedure as described by Forrest Li here:
https://github.com/floryst/vtk-js-angular-10
As soon as I add this line
import vtkFullScreenRenderWindow from ‘vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow’;
to the component ts file I am getting this error:
Error: node_modules/vtk.js/Sources/Rendering/Core/Prop/index.d.ts:180:29 - error TS7006: Parameter ‘renderTimeMultiplier’ implicitly has an ‘any’ type.
180 setRendertimemultiplier(renderTimeMultiplier): boolean;
Strangely if I take GitHub - floryst/vtk-js-angular-10: Example repo demonstrating vtk.js and Angular 10 repo and updgade Angular to version 12, I don’t see this error. What am I missing? Thanks.

2

Is it because of the "vtk.js": "^14.15.4", version?

3

Thanks, for such a quick reply Sebastien. I’ve tried to remove the latest vtk.js and install 14.5.4 in my project. This is what I’m getting:
error TS7016: Could not find a declaration file for module ‘vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow’. ‘<my path here …> /node_modules/vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index.js’ implicitly has an ‘any’ type.
** Try npm i --save-dev @types/vtk.js if it exists or add a new declaration (.d.ts) file containing declare module 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';**

4

In version 14, we didn’t have any type definition. Now we do (to some extent) but it is possible that some of the definitions are incomplete, wrong or missing. The tricky part here, is that I’m not that familiar with TS. But a quick Google lead me to this

5

Thanks a lot, Sebastien,
It does seem that some types are not there. For example, I was having a hard time with Renderer type and also some Interactors. I will try to get version 14 to work. Alternatively, I am thinking that perhaps VTK.js should not be used with strict type-enforced environments like Angular. At least for the time being. Perhaps I should switch gears and try out Vue.js. I am in the process of building a prototype, so before I go down the rabbit hole with Angular, I might try something else. Please let me know what you think.

6

If it is for a prototype, you definitely want to skip the type fixing part. I really like Vue.js with Vuetify.
For a Vue based RenderWindow you can see how we’ve implemented here.

I’m not saying you should use that library, but just “how to” embed vtk.js into a Vue component.

Good luck with your dev!

7

Sebastien,
Thanks. Just to close the loop on the original query, in case this comes up in the future: I was able to get VTK to work in Angular 12 app. So in summary:

  1. You definitely need to follow all the steps here: GitHub - floryst/vtk-js-angular-10: Example repo demonstrating vtk.js and Angular 10.
  2. You want to use
    “vtk.js”: “^14.15.4”,
    “worker-loader”: “^3.0.1”
    in your package.json.
  3. Also I replaced the tsconfig.json generated by Angular CLI with the one in that repo. I suspect that some of the strict type requirements in the default Angular tsconfig file were preventing me from compiling .
1 Like