Configuration of webpack to import glsl files is missing

[AxiomeCG]

Describe the bug

./src/app/three-viewer/engine/shader/point/fragment.glsl:2:12 - Error: Module parse failed: Unexpected token (2:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
> void main() {
|     gl_FragColor = vec4(1.0,1.0,0.0,1.0);
| }

Expected behavior
Should be able to import external glsl shaders

Solution

Use a custom builder:

npm install --save-dev @angular-builders/custom-webpack

npm install --save glslify-loader raw-loader

angular.json

{
  //...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            },
           //...
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
     //...
}

custom-webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(glsl|vs|fs|vert|frag)$/,
        exclude: /node_modules/,
        use: [
          'raw-loader',
          'glslify-loader'
        ]
      }
    ]
  }
}