Angular+ABP项目编译成功但HTML文件存在大量无关错误如何排查

场景说明：完成npm依赖安装后项目可正常编译、页面可正常加载，但运行阶段抛出大量无关联HTML模板错误，按以下优先级排查处理：

• 依赖版本一致性排查（最高发原因）
  ABP框架对版本绑定要求极强，@abp/*系列包、Angular核心包版本错位是这类问题的首要诱因：
  1. 核对package.json中所有@abp/开头的依赖包版本，必须和当前项目使用的ABP后端模板版本完全一致，禁止混装不同大版本的ABP依赖
  2. 核对Angular核心包（@angular/core/@angular/common/@angular/compiler等）版本，必须匹配当前ABP版本的兼容要求：ABP 6.x对应Angular 14、ABP 7.x对应Angular 15、ABP 8.x对应Angular 16/17，不要自行跨大版本升级Angular
  3. 清理缓存重装依赖：删除项目根目录下的node_modules文件夹、lock文件（npm对应package-lock.json、yarn对应yarn.lock、pnpm对应pnpm-lock.yaml），执行npm cache clean --force后重新执行npm install
• TypeScript与Angular配置校验
  编译通过但运行时报模板错，大概率是配置项不匹配：
  1. 检查根目录tsconfig.json中的strictTemplates配置，如果是从低版本ABP升级的项目，不要贸然开启严格模板检查模式，ABP部分官方组件的类型定义未适配严格模式时，会批量抛出无关联模板错误
  2. 检查angular.json中各构建目标引用的tsconfig路径是否正确，避免引用到非项目目录下的错误配置文件
• 模块导入校验
  ABP的组件、指令、管道按模块拆分，模块导入缺失会导致模板无法识别对应语法：
  1. 确认根模块已经正确导入CoreModule、SharedModule等ABP核心公共模块
  2. 懒加载的业务模块需要单独导入用到的ABP功能模块，如果报错集中在*abpPermission、本地化管道等ABP内置语法，直接核对对应功能模块是否在当前业务模块中导入
• 全链路缓存清理
  构建缓存、IDE缓存会导致幽灵报错：
  1. 执行ng cache clean清空Angular本地构建缓存
  2. 重启开发服务，不要复用之前的热更新进程
  3. 重载IDE（VS Code执行「重载窗口」、WebStorm执行「Invalidate Caches」）清理本地索引缓存

相关报错参考截图：

内容的提问来源于stack exchange，提问作者İrem Kürekçi