使用Angular导入模块中的自定义文件

Question

Trying to move from old architecture to the modular world and using the posprocessing package from npm with Three and Angular.

When importing a module from postprocessing it gives the following error:

Failed to compile.

./~/postprocessing/src/materials/adaptive-luminosity/glsl/shader.frag
Module parse failed: (...)/materials/adaptive-luminosity/glsl/shader.frag Unexpected token (1:8)
You may need an appropriate loader to handle this file type.
| uniform sampler2D tPreviousLum;
| uniform sampler2D tCurrentLum;
| uniform float minLuminance;
 @ ./~/postprocessing/src/materials/adaptive-luminosity/index.js 3:0-42
 @ ./~/postprocessing/src/materials/index.js

I assume its something with the Angular cli settings. Any idea how to enable the importing of custom file extensions?

Answer 1

Seems like you are trying to import a webgl fragment. Full disclosure, I don't know much about them. However, the issue is that webpack (config hidden in angular-cli) does not have a loader to handle the file type you want to import .frag

read on loaders here: https://webpack.js.org/concepts/loaders/

here is what you can do, if you really wish to use angular-cli

1. Eject your angular-cli app to output the webpack config: https://github.com/angular/angular-cli/wiki/eject
2. Add glslify-loader to webpack config: https://github.com/stackgl/glslify-loader

from the glslify-loader doc:

npm install --save glslify-loader raw-loader

then in loaders section of the webpack config file, add:

    loaders: [
      { test: /\.(glsl|frag|vert)$/, loader: 'raw', exclude: /node_modules/ },
      { test: /\.(glsl|frag|vert)$/, loader: 'glslify', exclude: /node_modules/ }
    ]
  }