[Feature Request] - Support to use/add Vite loader plugins (e.g. for web assembly)

[pgfeller]

We're considering Angular 17 for one of our projects and would like to leverage the benefits of the new es-build and vite support. As the the vanilla builders of the Angular projects do not support configuration of es-build nor vite they do not serve our purpose - as we have dependency that e.g. load web assemblies according to the proposed ESM standard, that is not supported by vite by default.

As this project supports the use of es-build plugins and to add vite middleware we consider if support for vite plugins could be added to the code as well. For this I forked the code to have a closer look to get a better idea ...

Do you think this is the right project to add vite plugin support ❓

I created a fork to see what the current state is and to create a prove of concept - but unfortunately have some problems. Is there a forum - or can such problems be discussed in the request as well? When I try to run yarn build:packages I get some errors and subsequently can not run the sanity-esbuild-app exampled:

📝2024-03-18: ✔️ updating/sync with latest code solved the build problem - details kept for reference

Detailed information about build the problem

• Windows 10.0.19044
• git version 2.44.0.windows.1
• node 20.11.1
• yarn 3.8.1
• npm ls -g:

  $ npm ls -g
    ~\.nvm\versions\node\v20.11.1\bin
    ├── @angular/cli@17.3.0
    ├── corepack@0.23.0
    └── npm@10.2.4

$ yarn build:packages 
➤ YN0000: [@angular-builders/bazel]: Process started
➤ YN0000: [@angular-builders/common]: Process started
➤ YN0000: [@angular-builders/custom-esbuild]: Process started
➤ YN0000: [@angular-builders/custom-webpack]: Process started
➤ YN0000: [@angular-builders/jest]: Process started
➤ YN0000: [@angular-builders/timestamp]: Process started
➤ YN0000: [@angular-builders/common]: Process exited (exit code 0), completed in 8s 25ms
➤ YN0000: [@angular-builders/custom-esbuild]: src/application/index.ts:7:28 - error TS2307: Cannot find module '@angular-builders/common' or its corresponding type declarations.
➤ YN0000: [@angular-builders/custom-esbuild]:
➤ YN0000: [@angular-builders/custom-esbuild]: 7 import { loadModule } from '@angular-builders/common';
➤ YN0000: [@angular-builders/custom-esbuild]:                              ~~~~~~~~~~~~~~~~~~~~~~~~~~
➤ YN0000: [@angular-builders/custom-esbuild]:
➤ YN0000: [@angular-builders/custom-webpack]: src/custom-webpack-builder.ts:6:28 - error TS2307: Cannot find module '@angular-builders/common' or its corresponding type declarations.
➤ YN0000: [@angular-builders/custom-webpack]:
➤ YN0000: [@angular-builders/custom-webpack]: 6 import { loadModule } from '@angular-builders/common';
➤ YN0000: [@angular-builders/custom-webpack]:                              ~~~~~~~~~~~~~~~~~~~~~~~~~~
➤ YN0000: [@angular-builders/custom-webpack]:
➤ YN0000: [@angular-builders/custom-webpack]: src/transform-factories.ts:7:28 - error TS2307: Cannot find module '@angular-builders/common' or its corresponding type declarations.
➤ YN0000: [@angular-builders/custom-webpack]:
➤ YN0000: [@angular-builders/custom-webpack]: 7 import { loadModule } from '@angular-builders/common';
➤ YN0000: [@angular-builders/custom-webpack]:                              ~~~~~~~~~~~~~~~~~~~~~~~~~~
➤ YN0000: [@angular-builders/custom-webpack]:
➤ YN0000: [@angular-builders/custom-esbuild]: src/dev-server/index.ts:12:28 - error TS2307: Cannot find module '@angular-builders/common' or its corresponding type declarations.
➤ YN0000: [@angular-builders/custom-esbuild]:
➤ YN0000: [@angular-builders/custom-esbuild]: 12 import { loadModule } from '@angular-builders/common';
➤ YN0000: [@angular-builders/custom-esbuild]:                               ~~~~~~~~~~~~~~~~~~~~~~~~~~
➤ YN0000: [@angular-builders/custom-esbuild]:
➤ YN0000: [@angular-builders/custom-esbuild]: src/load-plugins.ts:4:28 - error TS2307: Cannot find module '@angular-builders/common' or its corresponding type declarations.
➤ YN0000: [@angular-builders/custom-esbuild]:
➤ YN0000: [@angular-builders/custom-esbuild]: 4 import { loadModule } from '@angular-builders/common';
➤ YN0000: [@angular-builders/custom-esbuild]:                              ~~~~~~~~~~~~~~~~~~~~~~~~~~
➤ YN0000: [@angular-builders/custom-esbuild]:
➤ YN0000: [@angular-builders/custom-esbuild]:
➤ YN0000: [@angular-builders/custom-esbuild]: Found 3 errors in 3 files.
➤ YN0000: [@angular-builders/custom-esbuild]:
➤ YN0000: [@angular-builders/custom-esbuild]: Errors  Files
➤ YN0000: [@angular-builders/custom-esbuild]:      1  src/application/index.ts:7
➤ YN0000: [@angular-builders/custom-esbuild]:      1  src/dev-server/index.ts:12
➤ YN0000: [@angular-builders/custom-esbuild]:      1  src/load-plugins.ts:4
➤ YN0000: [@angular-builders/custom-webpack]:
➤ YN0000: [@angular-builders/custom-webpack]: Found 2 errors in 2 files.
➤ YN0000: [@angular-builders/custom-webpack]:
➤ YN0000: [@angular-builders/custom-webpack]: Errors  Files
➤ YN0000: [@angular-builders/custom-webpack]:      1  src/custom-webpack-builder.ts:6
➤ YN0000: [@angular-builders/custom-webpack]:      1  src/transform-factories.ts:7
➤ YN0000: [@angular-builders/custom-esbuild]: Process exited (exit code 2), completed in 9s 560ms
➤ YN0000: [@angular-builders/custom-webpack]: Process exited (exit code 2), completed in 9s 553ms
➤ YN0000: [@angular-builders/timestamp]: Process exited (exit code 0), completed in 13s 273ms
➤ YN0000: [@angular-builders/bazel]: Process exited (exit code 0), completed in 13s 355ms
➤ YN0000: [@angular-builders/jest]: PASS src/options-converter.spec.ts (6.241 s)
➤ YN0000: [@angular-builders/jest]: PASS src/jest-configuration-builder.spec.ts (6.348 s)
➤ YN0000: [@angular-builders/jest]: PASS src/default-config.resolver.spec.ts (6.891 s)
➤ YN0000: [@angular-builders/jest]: PASS src/custom-config.resolver.spec.ts (6.952 s)
➤ YN0000: [@angular-builders/jest]:
➤ YN0000: [@angular-builders/jest]: Test Suites: 4 passed, 4 total
➤ YN0000: [@angular-builders/jest]: Tests:       24 passed, 24 total
➤ YN0000: [@angular-builders/jest]: Snapshots:   0 total
➤ YN0000: [@angular-builders/jest]: Time:        7.577 s
➤ YN0000: [@angular-builders/jest]: Ran all test suites.
➤ YN0000: [@angular-builders/jest]: Process exited (exit code 0), completed in 23s 295ms
➤ YN0000: Done in 23s 352ms

➡️ We would like to know if this is the right place to add support for the vite plugins, and if yes - we'll evaluate further and contribute the result to the project. But for this we would need help to build the current example apps - as we did not use yarn in a monorepository we need some support here.

The alternatives we considered are:

• rewrite the wasm to load the asset dynamically; but the limitations of the Angular builders will remain and we want the flexibility to configure the builders and dev-server in case thinks come our way that are not in the vanilla vite implementation
• use nx build system - we did not investigate this in depth, but this projects seems to use their own builders. But we do not want to introduce nx, as we would like to keep the number of used libraries and different technologies to the minimum.
• Not using Angular, but Vue - as there we were able to load the existing assemblies using vite plugins without problems. However - as we have more experience with Angular switching the framework is something we would like to avoid.

---

Feedback is highly appreciated!
Let me know if this is the wrong place for discussions or to ask for help - as atm it is a feature request including a request for advice/support ...

[just-jeb]

Hi @pgfeller, thanks for such an elaborate feature request!
To answer your question - yes, this is definitely the right place for such kind of functionality, since Angular CLI does not (nor do they intend to) officially support any custom functionality that alters the build process.
That said, they expose a set of APIs that allows for 3rd party builders (like this one) to hook into the build process. In case this set of APIs supports what you need then you only need to incorporate this functionality here. Otherwise, you might have to open an issue for Angular CLI as well, and maybe submit a PR.
Hope this answers your question, lmk if you need any further assistance.

[pgfeller]

Hope this answers your question, lmk if you need any further assistance.

Thanks for the reply. Yes - that answer my most important question: that this is the right place 🙂. Thank you for your offer to help.

That said, they expose a set of APIs that allows for 3rd party builders (like this one) to hook into the build process. In case this set of APIs supports what you need then you only need to incorporate this functionality here. Otherwise, you might have to open an issue for Angular CLI as well, and maybe submit a PR.

I'll create a prove of concept to see if we can achieve the functionality we need. If this works and we go for Angular 17 I'll get back to you if that issue can be assigned to me and I finalize the poc to a PR that could be included into this loaders feature set.

with kind regards,
Patrik

[pgfeller]

➡️ Discussed possible approach to add vite plugin support to the project (created POC) - see also Angular Builders - Slack #Help

Creating a poc to support vite plugin configuration files was only possible by modifying the default builder by angular-cli - or else a full rewrite of the builder would be possible.

For our use case (support of a library directly including wasm) the POC did not work - as other adjustments would be necessary as well:

Application bundle generation complete. [5.950 seconds]
Watch mode enabled. Watching for file changes...       
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
X [ERROR] Top-level await is not available in the configured target environment ("esnext" + 7 overrides)

    vite-plugin-wasm-namespace:C:\dev\Project\Angular17-04\node_modules\@viewer\cosmo\cosmo_bg.wasm:44:27:
      44 │ 

Using the top-level-await plugin - as suggested by the wasm plugin author did not solve the problem.

@just-jeb agreed, that atm webpack is the better option for us and to provide a clean implementation for vite plugins in this project does not make sense without adjustments in angular-cli.

• I'll create a feature request to expose the necessary interface to create derivates of the default builder - and/or to ask what the plans of the angular team are in regard of build system support in general. I'll add a link once I've created the request.

[Danielku15]

I would also have interest in a @angular-builders/custom-vite just like @angular-builders/custom-webpack. Without knowing the details under-the-hood I'd expect, once activated a, custom-vite.config.js` should allow customization of any Vite settings and plugins.

I am developing a Vite Plugin which devs need to activate if they want to use my library in their projects. To use my library in an Angular Project using Vite they need a way to inject their own config and add my plugin there.

As far I could see Angular mainly uses Vite in the dev-server

For normal app building they seem use only ESBuild directly. Hence supporting Vite for building is likely more effort.

Hoping to see this feature at some point.