Custom vite middleware is not executed for CSS files about angular-cli HOT 4 OPEN

Are you using the proxy option to alter the requests or are you using a custom builder via programmatic usage of the development server builder?

Would it be possible to provide an example of what you are attempting?

from angular-cli.

We're using custom builder to pass additional middleware.
At this moment excerpt from our middleware config looks like this:

themeAssets.map(
  (asset: string): NextHandleFunction =>
    function (req, res, next) {
      if (req.url?.includes(`/assets/${asset}`)) {
        const theme = parseThemeName(req)
        if (theme) {
          res.writeHead(302, {
            location: `/assets/context/${theme}/${asset}`,
          })
          res.end()
          return
        }
      }
      next()
    },
)

• themeAssets is an array of assets (logo.png, etc.),
• parseThemeName extracts desired theme from the url.

We'd like to use the same approach for css files (for example, we want redirect theme-default.css to theme-XYZ.css when needed. Currently this is not possible, because custom middlewares are not executed for css files at all.

from angular-cli.

Ideally, this should be possible with a customized proxy configuration file. I'll see if I can put together an example.

Are you using the customized builder for anything beyond the additional middleware?

from angular-cli.

Ideally, this should be possible with a customized proxy configuration file.

It seems to work for images or other static assets, but doesn't for CSS files.

I've even tried to "catch-all" requests with:

export default {
  '/': {
    bypass: function (req, res, proxyOptions) {
      console.log(req.url)
    },
  },
}

When you visit localhost:4200/theme-default.css, only url containing favicon.ico is being logged.
When you visit localhost:4200/asset/header-logo.png, request is correctly intercepted and I can redirect it wherever I need.

Are you using the customized builder for anything beyond the additional middleware?

Yes, we also provide some esbuild plugins - mostly to replace some placeholders (using options.define).

from angular-cli.