在angular cli应用程序中使用vtk.js / glsl文件

Question

我尝试在angular cli应用程序中使用vtk.js，并将vtk.js添加到我的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....

如何在angular cli中使用glsl加载器？

当然不需要射出角状突起。

Answer 1

我找到了解决方案here。你不需要弹出，因为Angular 6禁用了弹出功能。只需遵循文章，extra-webpack.config.js内容如下所示：

  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 },
          },
        ],
      },
    ],
  },
};

当然，您必须安装依赖项vtk.js和kw-web-suit。那么它应该被成功编译。如果你在浏览器的开发者模式下遇到“全局未定义”的错误，那么将(window as any).global = window;添加到Angular的polyfills.ts中。我用最新的vtk.js在Angular 6上也能用。

Answer 2

您可以尝试使用vtk.js的预构建umd版本吗？