@angular/build Support for code coverage gathering during Playwright E2E tests

[trickeyone]

Command

build

Description

Prior to the new Angular build system, it was possible to gather coverage metrics via the babel-loader and the babel-plugin-istanbul plugin. This instrumented gathering coverage metrics during the Playwright tests being run. However, now that the new build system uses esbuild, there is no way to instrument this, thus no way to gather coverage metrics.

I have spent the past week searching Stackoverflow, Medium articles, and every other resource I can find. I've looked at trying to leverage Playwright's Coverage support via V8 integration, which only provides coverage for loaded compiled files, and sparsely at that, and provides no real coverage for the codebase.

This is a major blocker for our release pipeline, that is above my head to change the configuration for, which requires releases to provide code coverage metrics via E2E tests. I'm at my wits end and have found no way support this requirement with the new build system.

What I don't understand is why/how code coverage can be gathered during the Unit Tests fine, but there is no way to instrument the new builder to gather coverage metrics.

If all else fails, we'll be forced to revert back to using either ngx-build-plus or @angular-builders/custom-webpack and continue using Webpack as the builder as I've run into @angular-architects/native-federation causing errors like:

Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
> export * from '@softarc/native-federation-runtime';

Describe the solution you'd like

Either some way to add Vite plugins to support istanbul coverage gathering (i.e. vite-plugin-istanbul), or some way to instruct the builder to inject coverage gathering like during Unit Tests.

Describe alternatives you've considered

I've tried using @angular-builders/custom-esbuild to attempt to add esbuild plugins like esbuild-plugin-istanbul but it doesn't work because apparently the hook that it requires is not exposed by the Angular build setup (abraha2d/esbuild-plugin-istanbul#1 (comment))

I also tried adding a middleware in an attempt to instrument metrics gathering, in combination with the esbuild plugin above, but nothing worked.