Angular 19 doesn't generate sourcemaps for some ts files

[roma2341]

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

core

Is this a regression?

Yes

Description

Angular - 19.1.6
I noticed that its become very hard to debug code in browser, it appeared that angular doesn't build sourcemaps for some components. What is interesting is that some components have sourcemaps. I tried both chrome and firefox.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

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

Anything else?

No response

[roma2341]

[binerdy]

@roma2341 Could you share the angular.json settings?
I have an issue where I can't debug components, because we have aot disabled.

[roma2341]

@roma2341 Could you share the angular.json settings? I have an issue where I can't debug components, because we have aot disabled.

Thanks, i changed "aot": false to "true" and now it seems to work fine, every ts file has sourcemaps

It's very interesting because i thought that this option wasn't used by angular anymore because we can't disable aot if i understand correctly

[CFT-Chris]

I've ran into this or a version of this bug. About 5% of my dependencies' sourcemaps are missing in the final bundle. Original .ts sources don't show up, and names and symbols for that module link to a different dependency that's in the same chunk making debugging of the affected dependency a nuisance.

Setting "aot": true made no difference in my case. In fact, stepping through angular-cli's build code I noticed that jit is hard coded true when I run ng serve.

I've narrowed the issue to the esbuild binary itself, so it might be a bug with esbuild 0.25.0 which angular-cli recently upgraded to. Some of the generated chunks simply do not include the respective sourcemaps of the code they bundle.

My current workaround for an affected dependency is to remove its .map file in node_modules, clear the angular cache, and serve again. While I might not be able to debug the original .ts code for the dependency, at least its .*js code can be debugged.

[alan-agius4]

From #29697

We have a large Angular app, and for the time being we're using JIT mode during local development for faster change-reload cycles.

Since upgrading to Angular 19 we've noticed component sourcemaps are missing in the Sources panel of the browser dev tool. When placing debugger statements in our code the browser just points at the end of the component template. This is not a problem when AOT is enabled.

I noticed after some debugging that disabling the Angular CLI cache resolves the problem. Running ng cache clean or removing the .angular directory and restarting the dev server (with caching) does not help. Caching needs to be completely disabled for sourcemaps to work.

Caching enabled:

Caching disabled:

Minimal Reproduction

https://github.com/urrang/ng19-sourcemap-repro

Command: ng serve

The repro app has a debugger statement in the button's click handler. On the main branch the problem should be reproducible. On the cache-disabled branch CLI's cache has been disabled and the debugger should work as expected.

[alan-agius4]

I had a look at this and it seems like an issue with esbuild since 0.24.1 where the sourcemap includes missing sources.

See: evanw/esbuild#4104