如何配置ESLint检测Angular严格模板错误无需每次构建应用

方案1：通过ESLint直接捕获严格模板错误 #

你当前的ESLint配置未启用Angular模板类型检查规则，只需做如下修改即可在ESLint阶段检测所有strictTemplates对应错误：

1. 升级@angular-eslint相关依赖到与你Angular 11版本匹配的版本（Angular 11对应@angular-eslint 2.x系列）
2. 修改项目级ESLint配置中HTML文件的校验规则，新增模板类型检查扩展：

{
  "files": ["*.html"],
  "extends": [
    "plugin:@nrwl/nx/angular-template",
    // 新增以下两个扩展
    "plugin:@angular-eslint/template/recommended",
    "plugin:@angular-eslint/template/recommended-requiring-type-checking"
  ],
  // 新增parserOptions关联项目tsconfig，用于类型推导
  "parserOptions": {
    "project": ["apps/to-home/tsconfig.*?.json"]
  },
  "rules": {}
}

3. 根目录ESLint配置无需额外修改，配置完成后执行nx affected:lint即可对所有受变更影响的应用/库执行全量检查，所有严格模板错误会直接在ESLint阶段抛出，无需执行构建。

方案2：轻量模板检查命令（无需修改ESLint配置） #

如果不想调整现有ESLint规则，可以使用Angular编译器自带的无输出检查能力，仅做类型和模板校验不生成构建产物，耗时仅为完整生产构建的10%-20%：

• 单项目检查命令：ngc -p 项目tsconfig路径 --noEmit
• 配合Nx的affected能力，仅检查受变更影响的项目，可直接在CI中替换原有全量构建步骤：

nx affected --target=lint && nx affected --exec "ngc -p {projectRoot}/tsconfig.app.json --noEmit"

性能优化建议 #

• 开启Nx的远程缓存能力，已经检查过的无变更项目会直接复用缓存结果，无需重复检查
• 对公共库的变更，可通过Nx的依赖图谱只校验直接依赖该库的上层应用，无需全量构建所有应用

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