Angular-ESLint 中关于自闭合标签规则与 Angular CLI 18 的兼容性问题分析

在 Angular 项目中使用 ESLint 进行代码规范检查时，prefer-self-closing-tags 规则会将 <app-root></app-root> 这样的标签自动转换为自闭合形式 <app-root />。然而，这一转换行为在 Angular CLI 18.0.0 及以上版本中会导致构建失败。

问题背景

Angular CLI 18.0.0 引入了一个新的构建时检查，会拒绝在 index.html 文件中使用自闭合的 <app-root /> 标签。这一变更源于 Angular 团队对 HTML 标准的严格遵循，因为 <app-root> 是一个自定义元素，根据 HTML5 规范，自定义元素不应该使用自闭合语法。

技术影响

当开发者同时使用以下配置时会出现问题：

1. 启用了 @angular-eslint/template/prefer-self-closing-tags 规则
2. 项目升级到了 Angular CLI 18+
3. 构建时会处理 index.html 文件

构建错误信息会明确指出问题所在：

Invalid self-closing element in index HTML file: '<app-root />'

解决方案

针对这一问题，社区已经提出了几种解决方法：

1. 特定文件排除方案
   通过修改 ESLint 配置，专门排除对 src/index.html 文件应用这条规则。这是目前官方推荐的主要解决方案。

2. 使用注释禁用规则
   在 index.html 文件中添加 ESLint 禁用注释：

   <!-- eslint-disable @angular-eslint/template/prefer-self-closing-tags -->
   <app-root></app-root>
   

3. 配置覆盖方案
   在项目的 ESLint 配置中添加针对特定文件路径的规则覆盖：

   {
     "overrides": [
       {
         "files": ["src/index.html"],
         "rules": {
           "@angular-eslint/template/prefer-self-closing-tags": "off"
         }
       }
     ]
   }
   

注意事项

需要注意的是，Angular 项目并不强制要求使用 src/index.html 这一特定路径。如果项目采用了不同的目录结构（如 frontend/index.html），则需要调整上述解决方案中的文件路径匹配模式。

最佳实践建议

对于 Angular 项目，特别是升级到 18+ 版本后，建议：

1. 在项目初始化时就配置好 ESLint 规则，避免自动转换 index.html 中的根组件标签
2. 定期检查 Angular CLI 的更新日志，了解可能影响构建的变更
3. 对于团队项目，应在代码规范中明确说明对根组件标签格式的要求

这一问题的出现提醒我们，在整合不同工具链时，需要特别注意它们之间的版本兼容性和规范一致性。