vitePlugins options at serveWithVite

[aasereb7]

Command

serve

Description

Hi! I'm trying to customize my serve builder and stuck with trouble - right now there's no way to pass some plugin to Vite dev-server

Is there a reason for this approach or there were just no reason to implement feature like that?

Describe the solution you'd like

Solution might be quite simple - give user ability to pass vitePlugins option to extensions argument of serveWithVite function near current buildPlugins option, then this arg might be passed to setupServer func, and plugins section finally

Also, from my point of view, it would be really great to have a chance to do all this from angular.json config file

I can try my best and create PR on that if needed

Is there any chance for this to appear in angular?

Describe alternatives you've considered

No response

[alan-agius4]

Can you please elaborate on what sort of plugins do you need?

In the Angular CLI, Vite is used as the web server. This means that adding plugins to Vite will only affect the bundles used by the ng serve command and not the bundle created by the ng build command.

Therefore, plugins should be added as part of the Esbuild pipeline, not Vite, so they can be applied to both the dev-server and the application builder. This functionality is already supported by the API.

[aasereb7]

Build plugins is great feature, it would be better only to have option at angular.json, but the case is about handling dev server

We are using MF and i want reload browser page on remotes code update. So I want to handle dev server when it's bundle untouched, there are both bunch of vite plugins on npm and easy to create my own plugin for that. But there is no way to use that plugin right now

[aasereb7]

I understand my goal could be achieved by passing single builder func to serveWithVite, but still, vite plugins is great tool and I'm sure there are a lot of usage variants

Is there a reason to hide this option?

[jonmarozick]

@aasereb7 This might be what you are looking for: https://www.npmjs.com/package/@angular-builders/custom-esbuild?activeTab=readme

[aasereb7]

@aasereb7 This might be what you are looking for: https://www.npmjs.com/package/@angular-builders/custom-esbuild?activeTab=readme

Thx a lot, interesting package, it allow to pass esbuild plugins and vite middlewares through config - cool, additional question is why @angular-devkit/build-angular:dev-server forbidding this? But it uses same executeDevServerBuilder (that, in the end, uses serveWithVite) builder as I did, so there is no chance for vite plugins since executeDevServerBuilder do not have such option. That's what I'm talking about - dev-server plugins

[alan-agius4]

I've discussed this with @clydin, and currently, we prefer not to expose the option for adding Vite plugins directly at this point. This can be confusing for users because most Vite plugins cannot be added, as the code compilation occurs independently of Vite.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}