7

I try to use vtk.js in my angular cli application and added the vtk.js to my angular-cli.json.

ERROR in ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeVS.glsl
Module parse failed: Unexpected token (18:10)
You may need an appropriate loader to handle this file type....

How can I use a glsl loader with angular cli?

Of course without ejection of angular cli.

DJDaveMark
  • 2,669
  • 23
  • 35
daniel
  • 34,281
  • 39
  • 104
  • 158
  • 1
    You should probably eject webpack config from Angular CLI and follow vtk.js webpack configuration documentation https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html – VagrantAI Feb 14 '18 at 21:50
  • Had the same issue with an other lib and seems there is no way around ejection of the Webpack configuration. – Mathieu de Lorimier Feb 20 '18 at 15:29

2 Answers2

3

I found the solution here. You don't have to eject since Angular 6 has disabled ejection. Just follow the article and the extra-webpack.config.js content is as follows:

  module.exports = {
  module: {
    rules: [
      {
        test: /\.glsl$/i,
        include: /node_modules(\/|\\)vtk\.js(\/|\\)/,
        loader: 'shader-loader',
      },
      {
        test: /\.js$/,
        include: /node_modules(\/|\\)vtk\.js(\/|\\)/,
        loader: 'babel-loader?presets[]=env',
      },
      {
        test: /\.worker\.js$/,
        include: /node_modules(\/|\\)vtk\.js(\/|\\)/,
        use: [
          {
            loader: 'worker-loader',
            options: { inline: true, fallback: false },
          },
        ],
      },
    ],
  },
};

of course, you have to install the dependency vtk.js and kw-web-suit. Then it should be compiled successfully. if you meet the error which says "global is not defined" in browser's developer mode, then add (window as any).global = window; to Angular's polyfills.ts. It works for me on Angular 6 with the latest vtk.js.

Allen lu
  • 230
  • 1
  • 2
  • 7
  • hey, I am also trying to use vtk.js in my angular project and tried you suggestion by replacing builder with custom-webpack builder in `angular.json`. I get `An unhandled exception occurred: Job name "..getProjectMetadata" does not exist.` error. Do you have any suggestion ? – rainversion_3 Aug 13 '20 at 11:05
  • I downgraded custom-webpack to `8.4.1` but I get the following error `ERROR in ./node_modules/vtk.js/Sources/Rendering/Core/Actor/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js):` I don't understand what this error means ? – rainversion_3 Aug 14 '20 at 08:52
  • I have been not doing these for a long time, I'm afriad that I can't help. What about using three.js? We switch to using three.js, because vtk.js is some what hard to use. – Allen lu Aug 18 '20 at 07:43
  • thanks for update, my needs are more on manufacturing simulation where as `three.js` seems to generic 3D library – rainversion_3 Aug 19 '20 at 09:33
  • Hey I found this link useful and it solved my problem https://github.com/Kitware/vtk-js/issues/1003#issuecomment-676477880, maybe you can add it to your answer – rainversion_3 Aug 19 '20 at 17:17
1

Can you try to use the pre-build umd version of vtk.js?

Sebastien Jourdain
  • 11
  • 1