With the Angular 17.3 -> 18.0 upgrade, the local dev server (ng serve) got broken. We use it to connect the local dev instance to our backends in the cloud, for development. There were no config changes, only dependencies and unrelated code level migrations.
After the upgrade, some of the API requests were successful, but some returned 404, so working with the local dev server was not really possible any more. More specifically, some requests always worked, and some others always failed with 404, and it was seemingly random which ones. E.g. /api/v1/me and /api/v1/project?usedIn=false always worked, but some others like /api/v1/permissions/<username> always failed.
In our proxy-conf.json, we had to change the path wildcards from
{
"/rest/v1/*": {
"target": "https://company-fqdn.com:9080/app/api",
"secure": false,
"changeOrigin": true,
"pathRewrite": {"^/rest" : ""}
}
}
to "/rest/v1/**", note the double asterisks. Also, in hindsight, the requests that were successful only had a single path section after /rest/v1/ and the ones that did not were the ones that had multiple path sections, see my original examples.
Explanation and the steps I took to discover this:
ng serve --verboseoutputs verbose info about what the dev proxy does- It said that the requests that were successful are being successfully proxied, but for the ones that returned 404 in the browser, the log said
Not rewriting <method> <url> because the client prefers JSON- This was really confusing at first, because of course they were requesting json, because they are API calls.
- But some research showed that this is the error message by some middleware library for the case when the usual SPA setup (always serve the
index.htmlso that the client routing can kick in) receives a request with theAcceptheader specifying json, so the library can’t respond with theindex.html
- HHHa, that’s interesting, but still not that useful directly.
- Started to look into what might be the library that does the parsing of the proxy config. Starting from https://angular.dev/tools/cli/serve#proxying-to-a-backend-server ended up looking at https://webpack.js.org/configuration/dev-server/#devserverproxy and some other stuff
- … and somehow
http-proxy-middlewarealso came up. Checked the docs of that, and multiple of the examples showed the**syntax for a complete wildcard, instead of a single*which is rather just for a single part of the url. Changing this solved the issue. - Looked into the
package-lockto check whetherhttp-proxy-middlewarewas upgraded, as it is a transitive dependency, and indeed, it went from2.0.6to3.0.0… which may or may not be the direct cause of the issue.