在 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....

如何将 glsl 加载程序与 angular cli 一起使用？

当然没有弹出 angular cli。

Answer 1

你可以尝试使用 vtk.js 的 pre-build umd 版本吗？

Answer 2

我找到了解决方案 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 },
          },
        ],
      },
    ],
  },
};

当然，你必须安装依赖[=12=]和kw-web-suit。那么应该可以编译成功。如果您在浏览器的开发者模式下遇到 "global is not defined" 的错误，请将 (window as any).global = window; 添加到 Angular 的 polyfills.ts。它适用于 Angular 6 和最新的 vtk.js.

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

Use vtk.js / glsl files in angular cli app

angular

angular-cli

vtk.js