Angular 18独立组件缺失导入无编译错误，如何提前检测？

问题根源 #

Angular默认编译逻辑对模板内联的组件引用校验不够严格，仅依赖运行时的DOM检测，而VS Code的提示来自Angular Language Service的实时校验，并非编译阶段的强制检查。

解决办法 #

1. 开启严格模板类型检查 #

修改tsconfig.json，启用Angular编译器的严格模板校验规则，让编译阶段直接检测未导入的组件：

{
  "compilerOptions": {
    // 保留原有配置...
    "strictTemplates": true
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInputTypes": true,
    "strictAttributeTypes": true
  }
}

启用后，编译器会严格校验模板中所有组件、指令、管道是否已加入独立组件的imports数组，缺失时直接抛出编译错误。

2. 使用严格模式构建命令 #

执行带严格参数的构建命令，强制开启全量严格校验：

ng build --strict

该命令会自动覆盖部分配置，强制启用严格编译规则，确保所有模板依赖都被正确导入。

3. 强化开发阶段实时校验 #

确保VS Code的Angular扩展配置正确，在编码时提前发现问题：

• 安装官方Angular扩展
• 在.vscode/settings.json中添加：

{
  "angular.enable-strict-mode": true
}

这样编写代码时就能实时收到缺失导入的提示，避免到编译或运行阶段才暴露问题。

验证效果 #

故意不导入FooComponent，执行ng build --strict，编译器会抛出明确错误：

Error: src/app/test.component.ts:7:5 - error NG8001: 'foo-component' is not a known element:
1. If 'foo-component' is an Angular component, then verify that it is part of this module.
2. If 'foo-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

此时就能在编译阶段及时发现并修复问题。

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