Angular 19+Esbuild生产构建移除data-testid属性遇阻

核心问题：HTML文件未进入esbuild的onLoad处理流程 #

你的插件setup方法能执行，但onLoad钩子没触发，根源在于Angular 19的构建流程和esbuild的处理逻辑不匹配：

• 组件模板编译优先级：Angular组件的.html模板会先被Angular编译器转换成TypeScript渲染代码，这个过程早于esbuild的加载阶段，所以不会触发esbuild的onLoad钩子。
• 静态HTML资源处理路径：index.html和assets目录下的静态HTML，是通过Angular的asset复制管道处理的，不会经过esbuild的onLoad逻辑。

针对性解决方案 #

方案1：处理组件模板中的data-testid（推荐） #

通过拦截Angular组件模板的解析请求，让模板进入esbuild的处理流程：

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

const removeTestIdPlugin: Plugin = {
  name: 'remove-testid-attributes',
  setup(build: PluginBuild): void {
    console.log('start');
    // 拦截组件模板的解析请求（仅处理被TS文件引用的HTML）
    build.onResolve({ filter: /\.html$/ }, (args) => {
      if (args.importer.endsWith('.ts')) {
        return { path: args.path, namespace: 'angular-template' };
      }
      return null;
    });

    // 处理标记为angular-template命名空间的HTML文件
    build.onLoad({ filter: /\.html$/, namespace: 'angular-template' }, async (args) => {
      let file = await fs.promises.readFile(args.path, 'utf8');
      file = file.replace(/\s+data-testid="[^"]*"/g, '');
      return {
        contents: file,
        loader: 'text',
      };
    });
  },
};

export default removeTestIdPlugin;

方案2：处理静态HTML文件（index.html和assets） #

针对静态HTML资源，直接在Angular的asset处理流程中添加转换逻辑：

1. 修改angular.json的assets配置，添加转换器：

"assets": [
  {
    "glob": "**/*",
    "input": "public",
    "transformers": ["./html-transformer.ts"]
  },
  {
    "glob": "index.html",
    "input": "src",
    "transformers": ["./html-transformer.ts"]
  }
]

2. 创建html-transformer.ts转换器文件：

import type { AssetTransformer } from '@angular-devkit/build-angular';

export default async function (content: Buffer): Promise<Buffer> {
  let html = content.toString('utf8');
  html = html.replace(/\s+data-testid="[^"]*"/g, '');
  return Buffer.from(html);
}

方案3：生产构建时的备选优化 #

如果data-testid仅用于测试场景，也可以借助Angular的构建优化工具，在编译阶段直接剔除这类属性，但需要额外配置模板编译的自定义规则，复杂度较高，推荐优先用前两种方案。

验证方式 #

执行生产构建命令：

ng build --configuration production

检查dist目录下的组件JS文件（查看渲染函数中的模板内容）和静态HTML文件，确认data-testid属性已被移除。

内容的提问来源于stack exchange，提问作者TalVik99