Remove html attributes on build on prod with esbuild

In Angular 19 app i'm trying to remove all data-testid attributes from html files if the production environment is running, but the onLoad() method doesn't run. The first console.log works every time so the plugin is properly enabled.

import type { Plugin, PluginBuild } from 'esbuild';
import fs from 'fs';

const removeTestIdPlugin: Plugin = {
name: 'remove-testid-attributes',
setup(build: PluginBuild ): void {

console.log('start'); // it runs
build.onLoad({ filter: /\.html$/ }, async (args) => {
let file = await fs.promises.readFile(args.path, 'utf8');
console.log(file); // never runs

file = file.replace(/\s+data-testid="[^"]*"/g, '');

return {
contents: file,
loader: 'text',
};
});
},
};

export default removeTestIdPlugin;


im including it like this in angular.json file:

"architect": {
"build": {
"builder": "@angular-builders/custom-esbuild:application",// custom esbuild
"options": {
"outputPath": "dist/frontend",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "css",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": ["src/styles.css"],
"scripts": [],
"plugins": ["./esbuild-transform.ts"] // here
},
}
}



What am i doing wrong?

Continue reading...