Add vite plugin support for dev server

[johncrim]

Command

serve

Description

I think vite plugins (even just a single vite plugin) should be addable to the angular.config, as an advanced dev-server option. I think this would be valuable primarily because there are significant differences between the webpack proxy server and the vite proxy server and adding this would be a useful escape hatch for any issues that come up.

If you look into it you'll see that the vite proxy server is simplistic and doesn't have much functional test coverage, whereas the vite plugin/middleware APIs are pretty full featured and well tested. Therefore limiting developers to the functionality of the vite proxy server is harming users and creating unnecessary support issues for angular (b/c the proxy is our only way to change request behavior during development).

Here are some of the changes between the webpack proxy and the vite proxy:

• bypass fn doesn't support async/Promise methods
  (I opened an issue for this and it's being worked on)
• bypass fn doesn't officially support bypassing the request
  See the conversation here - in short, the maintainer said:

we can't use vite plugins/middleware, b/c Angular exposes the vite proxy API, but doesn't allow vite plugins to be added.

I think Angular should expose an additional feature on their side; it doesn't feel right to me to create duplicate surfaces on the Vite side for a workaround just because Angular limited the surfaces.

• No support for router
• No support for much of the http-proxy-middleware functionality

It seems to me there are a number of angular issues due to the vite proxy server not being compatible with the webpack proxy server API, where people have built up significant dev server capabilities that is all associated with the old proxy server, and they can't migrate due to features they rely on not being supported. This feature would at least give people a way to help themselves.

Describe the solution you'd like

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "proxyConfig": "dist/app/dev/proxy.conf.js",
            "vitePlugins": ["dist/app/dev/mock-authentication-plugin.js"],
            "buildTarget": "app:build"
          }
        }

Describe alternatives you've considered

Write a new out-of-process dev proxy server that has to be spun up before the dev server is started, and proxy everything to it that requires replacing development request behavior. This would be cumbersome during development, and also some work to write - we would have to proxy websockets for example.

[alan-agius4]

Custom middleware’s are allowed to be added when using custom builders that extend the default builder.

Such example is https://github.com/just-jeb/angular-builders