`[ng test]` Can't debug tests when `-code-coverage`

[sroucheray]

🐞 Bug report

Command

• new
• build
• serve
• test (--code-coverage)
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

I have never really seen it worked despite a previously closed issue #7117

Description

When ng test runs with --code-coverage, sourcemaps for *.ts source files do not match (while sourcemaps for *.spec.ts files are fine). Thus it is not possible to breakpoint into source files nor step in the code. So either you get the sourcemaps or if you need to debug your test, you need to stop the tests and relaunch it without --code-coverage.

🔬 Minimal Reproduction

Any angular project with latest version and source with spec files can demonstrate de problem.

1. launch test on the project ng test --code-coverage, Karma launches the browser
2. click on the debug button, Karma debug window opens
3. open the devtools and in the source panel open one of the source files, you'll notice that breakpoints can be added to non code lines (comments) but cannot be added to some code lines. Actually the source displayed in the devtools are not in sync with the real sources. It seems there is a problem interpreting the sourcemaps when code coverage is activated.

NB: there is no problem adding breakpoints or step in spec files, the problem only happens in source files.
NB: there is no problem without --code-coverage

🌍 Your Environment

Angular CLI: 12.2.9
Node: 14.18.0
Package Manager: yarn 1.22.15
OS: linux x64

Angular: 12.2.9
... animations, cdk, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, localize
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.11
@angular-devkit/build-angular   12.2.9
@angular-devkit/core            12.2.9
@angular-devkit/schematics      12.2.9
@schematics/angular             12.2.9
ng-packagr                      12.2.4
rxjs                            6.5.5
typescript                      4.3.5
webpack                         5.59.1

[alan-agius4]

This seems to be an issue upstream with sourcemaps merging. However, since now the CLI uses Babel I think there are avenues here to replace the code instrumentation webpack plugin and leverage istanbul JS official plugin babel-plugin-istanbul which it seems that it doesn't have the same problem.

[sroucheray]

Thanks a lot for your work @alan-agius4 and @filipesilva ! That's going to be very helpful !

[angular-automatic-lock-bot]

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.}