Angular独立组件：是否有编译器/检查器选项检查缺失/未使用的导入？

编译器层面的严格模板检查 #

开启Angular的严格模板检查是最直接的解决方案，它能在编译阶段检测出模板中使用但未在独立组件imports数组中导入的指令（比如NgFor），同时也能识别未使用的导入。

在项目的tsconfig.json中，修改angularCompilerOptions配置：

{
  "angularCompilerOptions": {
    "strictTemplates": true,
    // 若需要更全面的严格检查，也可以直接开启全局严格模式
    // "strict": true
  }
}

开启后，当你在模板中使用了未导入的NgFor时，编译器会直接抛出错误，而非静默通过。

ESLint辅助检查 #

借助@angular-eslint插件，可以在编码阶段就检测出未使用的导入，同时配合严格模板检查覆盖缺失导入的场景。

1. 确保已安装@angular-eslint依赖：

ng add @angular-eslint/schematics

2. 在.eslintrc.json中启用相关规则：

{
  "rules": {
    "@angular-eslint/no-unused-imports": "error",
    "@angular-eslint/template/valid-template-binding": "error"
  }
}

这些规则会在你编写代码时实时提示未使用的导入，以及模板中绑定的指令是否已正确导入。

编辑器实时检查（Angular Language Service） #

在VS Code等编辑器中安装官方的Angular插件，启用Angular Language Service，它会在你编写模板时实时检测缺失的导入。确保编辑器设置中angular.enableLanguageService为true，这样当你在模板中使用NgFor但未导入时，编辑器会立即标红并给出“找不到指令”的提示，不用等到编译阶段。

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