@angular/build 20.1.0 totally breaks console logs line numbers in browser devtools

[rostislavcz]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hello,

after upgrading to minor version of @angular/build, whenever in my app I use console.log, in console it shows totally random line of code, for example i put console.log in my main.ts file on line 6 and in chrome devtool console, there is line 15 for example, before I used 20.0.3 version and that worked totally fine. Sometimes also happens that certain console logs are in console written as totally another file, for example I console.log something in my Directive1 and inside console log is shown in Directive2 on different line.

Took me several hours before i found that problem is definitely somewhere inside minor update of @angular/build/....

downgrade to @angular/buils@20.0.3 works as expected

Minimal Reproduction

just run any angular project with several services and you will see, that if you console.log in some service, lets say in constructor, in devtool console, you will see different line or even file

Exception or Error

Your Environment

@angular-devkit/architect    0.2001.1
@angular-devkit/core         20.1.1
@angular-devkit/schematics   20.1.1
@angular/build               20.1.1
@angular/cdk                 20.1.2
@angular/google-maps         20.1.2
@angular/material            20.1.2
@schematics/angular          20.1.1
rxjs                         7.8.2
typescript                   5.8.3
zone.js                      0.15.1

Anything else relevant?

No response

[jkrems]

Just clarifying: Is this really related to 20.1.1? I'm asking because it was released just an hour ago, so it seems unlikely that it was what got debugged for several hours. Was this something that already happened in 20.1.0 but is still broken in 20.1.1?

Can you share a minimal reproduction of the issue? Without a reproduction we can run, it'll be hard to verify the issue. There's many ways to configure an Angular project and this may not affect all of them.

[jpike88]

This is something that broke in 20.1.0 for me. Logging my own issue as well, as it's a serious breaking change.

[rostislavcz]

@jkrems sorry for misunderstanding, was too late and I was very tired :D tried it now, untill 20.0.6 its ok after 20.1.0 its broken as @jpike88 also reporting.

I will try to leave here minimal reproduction repo in the evening today if necessary, but I guess this would not be hard to reproduce if you take any larger angular project and put to some services constructors or anywhere else some console.logs, probably you will that line numbers are not right

[wscherphof]

npm install @angular/build@20.0.6 appears to serve as a workaround.

[jkrems]

Can you confirm if this was with the application builder or with the browser builder? I just tried a naive reproduction with ng new in version 20.1.0 and saw correct line numbers in DevTools.

[jpike88]

This is with the application builder.

[jpike88]

Based on what was released, the no 1 candidate for this issue might be 8f305ef

[jpike88]

tweaking my node_modules code to revert 8f305ef didn't seem to work. Still looking around...

[jpike88]

Analyzing source output from 20.06 vs 20.1.0, I found a couple of key differences:

• dom being added as prefix to a bunch of different names like element -> domElement and template -> domTemplate
• ɵɵreplaceMetadata seems to have a different order of items in it (but the same items)...
• source map base64s seem to be almost identical except for change in about 10-20 characters

[clydin]

If providing a minimal reproduction is problematic or even not possible, narrowing down the root cause would be aided by attempting to use the prerelease versions to determine when the problem for your projects occurred. For 20.1, the prerelease versions were: 20.1.0-rc.0, 20.1.0-next.3, 20.1.0-next.2, 20.1.0-next.1, 20.1.0-next.0.