Angular大型应用中如何在编译时检测组件选择器未找到错误？

1. 启用Angular AOT编译与严格模板检查 #

Angular的JIT（即时编译）模式不会在构建阶段检查模板中的组件选择器，而**AOT（预编译）**会在编译时扫描所有模板，直接抛出未找到选择器的错误。

• 临时启用：执行命令 ng serve --aot 或 ng build --aot
• 永久配置：在angular.json中修改项目构建配置，默认启用AOT并开启严格模板检查：

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "aot": true,
            "strictTemplates": true
          }
        }
      }
    }
  }
  

  strictTemplates 会强制模板的类型检查，除了未找到的选择器，还能检测绑定错误、未知属性等问题。

2. 使用ESLint的Angular模板规则 #

通过@angular-eslint插件的特定规则，可以在代码检查阶段就捕获未定义的组件选择器：

• 确保已安装@angular-eslint依赖（Angular 12+默认集成）
• 在.eslintrc.json的规则中启用@angular-eslint/template/no-unknown-component-selectors：

  "rules": {
    "@angular-eslint/template/no-unknown-component-selectors": "error"
  }
  

  执行ng lint即可扫描所有模板中的无效选择器，直接抛出错误。

3. 利用Angular Language Service实时检查 #

在VS Code中安装官方的Angular Language Service插件，它会在编写模板时实时检测未找到的组件选择器，无需等到编译或lint阶段就能提示错误，适合开发过程中的即时校验。

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