Angular编译前预处理模板：如何修改AST注入DOM属性？

官方预处理环节 #

Angular没有像Svelte preprocess或SWC plugins那样官方原生的、开箱即用的模板AST预处理环节，但Angular编译器暴露了底层API，允许开发者自定义扩展编译逻辑。

已有类似实践 #

不少开发者通过Angular Compiler API实现过模板AST修改需求，比如自动给DOM元素注入属性、添加元信息等，这类实现通常以自定义构建插件或扩展Angular CLI构建流程的形式存在。

针对你尝试方案的补充 #

• Schematics：确实不符合需求，它的定位是源码生成与修改工具，会直接改动本地源码文件，无法满足“不修改源码”的编译时注入要求。
• ngx-ast-transform：该工具仅专注于TypeScript AST处理，不涉及Angular模板的解析与修改，因此无法实现你的需求。
• Webpack Loaders：这是可行的方向，但需要结合Angular Compiler API来解析和修改模板AST，而非直接操作原始源码字符串。

具体实现思路 #

1. 自定义Webpack Loader：拦截组件文件（.ts）或独立模板文件（.html）。
2. 提取模板内容：
   • 若处理组件.ts文件，用TypeScript API解析TS AST，定位@Component装饰器节点，提取template的字符串内容，或读取templateUrl指向的HTML文件内容。
3. 解析模板为AST：使用@angular/compiler包中的parseTemplate方法，将HTML字符串转换为Angular模板AST。
4. 修改AST节点：遍历AST中的ElementAst节点，给每个节点的attributes数组添加新的data属性节点（需符合Angular AST的属性节点结构）。
5. 转回HTML字符串：将修改后的AST转换回HTML字符串，替换原组件中的模板内容（或直接返回修改后的HTML内容给编译流程）。
6. 集成到构建流程：通过@angular-builders/custom-webpack扩展Angular CLI的Webpack配置，将自定义loader加入对应的规则中，确保每次构建都会执行该预处理步骤。

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