Repository navigation
Components sourcemap not resolved when using sub-paths #59729
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
While using Angular SSR, the dev server is trying to fetch .component.css.map file from an API server instead of Angular server, resulting in 404 error and crashes Node JS server.
This issue occurs when you add custom styles to a component's stylesheet while also having HTTP client enabled. I have included a demo project that has two components - an Index component and a TodoDetail component. A simple CSS styling is included in the index.component.css file. The TodoDetail component makes a HTTP request to an external API using HttpClient service. While on the TodoDetail page, refresh the browser and clear browser cache, then return back to index page by clicking on the back button on the browser, depending whether you have provideExperimentalZonelessChangeDetection enabled or not, your dev node js SSR server should either crash or show HttpErrorResponse containing 404 Not Found error.
A demo project is uploaded to github Acme Todo
To reproduce the error
- Run the local dev server by running the command
ng serve. - Open Chrome, navigate to home page.
- Open Chrome dev tool, go to network tab, select
Disable cache. - On the home page, click any one of the link.
- Refresh the page while on the todo detail view page. This is clear the cache.
- Return back to the previous page using the back button.
- Check server node js logs, it shows the dev server is trying to fetch .component.css.map file from the API server instead of Angular dev server.
Please provide a link to a minimal reproduction of the bug
https://github.com/rabikr/acme
Please provide the exception or error you saw
ERROR HttpErrorResponse {
headers: _HttpHeaders {
headers: Map(25) {
'access-control-allow-credentials' => [Array],
'age' => [Array],
'alt-svc' => [Array],
'cache-control' => [Array],
'cf-cache-status' => [Array],
'cf-ray' => [Array],
'connection' => [Array],
'content-length' => [Array],
'content-type' => [Array],
'date' => [Array],
'etag' => [Array],
'expires' => [Array],
'nel' => [Array],
'pragma' => [Array],
'report-to' => [Array],
'reporting-endpoints' => [Array],
'server' => [Array],
'server-timing' => [Array],
'vary' => [Array],
'via' => [Array],
'x-content-type-options' => [Array],
'x-powered-by' => [Array],
'x-ratelimit-limit' => [Array],
'x-ratelimit-remaining' => [Array],
'x-ratelimit-reset' => [Array]
},
normalizedNames: Map(25) {
'access-control-allow-credentials' => 'access-control-allow-credentials',
'age' => 'age',
'alt-svc' => 'alt-svc',
'cache-control' => 'cache-control',
'cf-cache-status' => 'cf-cache-status',
'cf-ray' => 'cf-ray',
'connection' => 'connection',
'content-length' => 'content-length',
'content-type' => 'content-type',
'date' => 'date',
'etag' => 'etag',
'expires' => 'expires',
'nel' => 'nel',
'pragma' => 'pragma',
'report-to' => 'report-to',
'reporting-endpoints' => 'reporting-endpoints',
'server' => 'server',
'server-timing' => 'server-timing',
'vary' => 'vary',
'via' => 'via',
'x-content-type-options' => 'x-content-type-options',
'x-powered-by' => 'x-powered-by',
'x-ratelimit-limit' => 'x-ratelimit-limit',
'x-ratelimit-remaining' => 'x-ratelimit-remaining',
'x-ratelimit-reset' => 'x-ratelimit-reset'
},
lazyInit: undefined,
lazyUpdate: null
},
status: 404,
statusText: 'Not Found',
url: 'https://jsonplaceholder.typicode.com/todos/index.component.css.map',
ok: false,
type: undefined,
name: 'HttpErrorResponse',
message: 'Http failure response for https://jsonplaceholder.typicode.com/todos/index.component.css.map: 404 Not Found',
error: {}
}
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 19.1.4
Node: 22.12.0
Package Manager: npm 11.0.0
OS: win32 x64
Angular: 19.1.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1901.4
@angular-devkit/build-angular 19.1.4
@angular-devkit/core 19.1.4
@angular-devkit/schematics 19.1.4
@angular/cli 19.1.4
@angular/ssr 19.1.4
@schematics/angular 19.1.4
rxjs 7.8.1
typescript 5.7.3
zone.js 0.15.0
Anything else?
No response
Activity
alan-agius4 commentedon Jan 24, 2025
This issue can be simply reproduced by adding a style in
todo-detail.component.scssand navigating tohttp://localhost:4200/todo/12.The root cause is that the source map request is being accessed relative to
http://localhost:4200/todo, resulting in a request forhttp://localhost:4200/todo/todo-detail.component.css.map. This, in turn, causes the server to interpret it as matching the routetodo/:id.[-]Dev server crashes if a component stylesheet contains values while the HTTP client is also enabled[/-][+]Components sourcemap not resolved when using sub-paths[/+]fix(platform-browser): prepend `baseHref` to `sourceMappingURL` in CS…
fix(platform-browser): prepend `baseHref` to `sourceMappingURL` in CS…
fix(platform-browser): prepend `baseHref` to `sourceMappingURL` in CS…
angular-automatic-lock-bot commentedon Mar 1, 2025
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.