Use vtk.js / glsl files in angular cli app

Question

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.

Answer 1

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.

Answer 2

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