SPA with basehref causes ENOENT
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 43.3k
- Forks
- 2.7k
- PR merge metrics
- No merged PRs in 30d
Description
What's going wrong?
When serving an Angular application with a base href (/dummy/dum/), the server incorrectly appends the entire base href to the file path when trying to access assets. This results in an incorrect file path, causing the server to fail with an ENOENT error. For example, trying to access /dummy/dum/assets/images/img2.png leads to the server looking for C:\Users\USER\Documents\DESK\dummy\dist\dummy\dummy\dum\assets\images\img2.png instead of the correct path C:\Users\USER\Documents\DESK\dummy\dist\dummy\assets\images\img2.png.
How could we reproduce this issue?
- Set up an Angular application with a base href of /dummy/dum/. Can be done in angular.json with "baseHref": "/dummy/dum/"
- Use the provided Serve.js script to serve the Angular application.
- Place an asset in the assets directory, for example, assets/images/img2.png.
- Start the server and try to access the asset through a browser or a tool like curl: http://localhost:4200/dummy/dum/assets/images/img2.png.
- Debug and observe that it redirects to index.html instead of showing img2
Supporting information
This is my pm2 config. The build file is ./dist/dummy relative to dev folder.
{
"script": "serve",
"name": "dummyconf",
"watch": true,
"env": {
"PM2_SERVE_SPA": true,
"PM2_SERVE_HOMEPAGE": "/index.html",
"PM2_SERVE_PORT": "4200",
"PM2_SERVE_PATH": "dist/dummy"
}
}
Visiting http://localhost:4200/dummy/dum/assets/images/img2.png
I checked Serve.js of PM2 and noticed
var file = decodeURIComponent(url.parse(uri || request.url).pathname);
i.e
/dummy/dum/assets/images/img2.png
filePath,
var filePath = path.join(options.path, file);
i.e
C:\Users\USER\Documents\DESK\dummy\dist\dummy\dummy\dum\assets\images\img2.png
Correct path is
C:\Users\PACE\Documents\DESK\dummy\dist\dummy\assets\images\img2.png
My suggestion would be asking for base href for SPA in config and slicing it from the filename before resolving with the filePath.
Something like
var file = decodeURIComponent(url.parse(uri || request.url).pathname);
if (file.startsWith(options.baseHref)) {
file = file.slice(options.baseHref.length - 1);
}
var filePath = path.join(options.path, file);
Thank you!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in Serve.js and reproduce the request using an Angular application configured with baseHref "/dummy/dum/" and the provided PM2 serve settings. Trace how the decoded pathname becomes filePath, then verify that requesting the asset resolves to dist/dummy/assets/images/img2.png rather than redirecting to index.html. Done means the asset is served correctly without breaking SPA fallback behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, javascript, node.js
- Domain
- backend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100