how to configure Angular 17 builder to work with .glsl files?

Issue

Does anyone have a solution to work in the context of angular 17 with .glsl files (shaders) ? We used to be able to create a custom webpack builder but now angular uses vite... What do we do now ?

Solution

An new option just dropped allowing to allow configuring custom loaders with the new application builder

Add a loader option to you config :

loader: {
    ".glsl": "text"
}

An glsl file can then be imported:

import contents from './some-file.glsl';

Additionally, TypeScript needs to be aware of the module type for the import to prevent type-checking errors during the build. This can be accomplished with an additional type definition file within the application source code (src/types.d.ts, for example) with the following or similar content:

declare module "*.glsl" {
  const content: string;
  export default content;
}

---

I checked with the CLI team to confirm what I thought: It is not possible with builder that ships with the CLI.

Like webpack, users need to create their own builder or use a community builder.

Answered By - Matthieu Riegler