HEAD requests return 404 on Angular 18 dev server (except for index.html)

[jonathan-valle]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Don't known

Description

When sending a HEAD request to the Angular 18 development server (with vite), it returns a 404 response for all files except for index.html. However, GET requests to the same files return a 200 response.

Please provide a link to a minimal reproduction of the bug

Start the development server with Angular 18 (with vite).

Please provide the exception or error you saw

Steps to Reproduce:
Start the development server with Angular 18 (with vite).

Make a GET request for a file, such as main.js:

curl -vvv http://localhost:4200/main.js
Response: 200 OK

Output
* Connected to localhost (::1) port 4200
> GET /main.js HTTP/1.1
> Host: localhost:4200
> User-Agent: curl/8.7.1
> Accept: */*
>
* Request completely sent off
< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: *
< Content-Type: text/javascript
< Cache-Control: no-cache
< Etag: W/"5b40-oerrD+AKotT2Cte2dRk3u8TLupI"
< Date: Mon, 09 Sep 2024 11:28:24 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< Content-Length: 58235

Make a HEAD request for the same file:

curl -I -vvv http://localhost:4200/main.js
Response: 404 Not Found

Output:
* Connected to localhost (::1) port 4200
> HEAD /main.js HTTP/1.1
> Host: localhost:4200
> User-Agent: curl/8.7.1
> Accept: */*
>
* Request completely sent off
< HTTP/1.1 404 Not Found
< Access-Control-Allow-Origin: *
< Content-Security-Policy: default-src 'none'
< X-Content-Type-Options: nosniff
< Content-Type: text/html; charset=utf-8
< Content-Length: 147
< Date: Mon, 09 Sep 2024 11:27:55 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 18.2.3
Node: 20.16.0
Package Manager: npm 10.8.1
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1802.3 (cli-only)
@angular-devkit/core         18.2.3 (cli-only)
@angular-devkit/schematics   18.2.3 (cli-only)
@schematics/angular          18.2.3 (cli-only)

Anything else?

No response

[clydin]

Can you expand on your particular use case and why that would be problematic for your development workflows?

[jonathan-valle]

During our development phases, our backend server will load static resources on the Angular development server. Before accessing a resource, the framework (Spring) makes a HEAD request to check if the resource actually exists. Since HEAD requests only work on index.html, we get a 404 error for all other files. We didn't have this issue with Webpack.

[BBboy01]

I encountered the same problem with vite, request URL is prefixed with current URI , the solution is add a base tag (<base href="/">) to your index.html

webpack version will use APP_BASE_HREF as value automatically add base tag to index.html, but vite version not, maybe is bug?

[BBboy01]

the solution is add a base tag () to your index.html

or add "baseHref": "/" in your executor options

[jonathan-valle]

I think there is a misunderstanding about the problem. I don't have any issues retrieving my files. For example, if I perform a curl on the main.ts file with a GET request, I receive the file as expected. The issue arises when I make a HEAD request on the same file, then Vite returns a 404.

As a temporary solution, since we are using Vite as a development server, we added a custom esbuild configuration based on @angular-builders/custom-esbuild, and we added a middleware that transforms all HEAD requests into GET requests. This might not be the optimal solution, but it resolves our problem considering we are using Vite as a dev server only.

I would like to add that if a Vite server is started without Angular, there are no issues with HEAD requests.

Here is the configuration:

import { Connect } from 'vite';

const middleware: Connect.NextHandleFunction = (req, res, next) => {
  if (req.method == 'HEAD') {
    req.method = 'GET';
  }
  next();
};

export default middleware;

[BBboy01]

I think this is expected behaviors of vite.

middleware order: transformMiddleware -> indexHtmlMiddleware -> notFoundMiddleware

https://github.com/vitejs/vite/blob/ba56cf43b5480f8519349f7d7fe60718e9af5f1a/packages/vite/src/node/server/middlewares/transform.ts#L89

'GET' method is ignored by transformMiddleware, and there is noting handle HEAD request, notFoundMiddleware will be matched

as to index.html is fine, indexHtmlMiddleware doesn't check the request method

[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.}