Angular v13无法识别click、button、ngIf/ngFor等指令的解决方法

所有组件报无法识别click事件、原生HTML标签、ngFor/ngIf指令的核心原因是Angular编译器没有正确加载BrowserModule——上述所有模板语法、内置指令、原生事件支持全由该模块提供。
结合关机数小时重开后复现、新建空白项目也存在相同问题的特征，排除单个项目模块配置错误的可能，触发场景集中在三类：

• Node.js v12.22 与Angular v13的兼容边界问题：Angular v13最低支持Node.js 12.20.0，但12.22.x版本搭配npm 6/7存在已知的依赖元数据缓存损坏bug，全局npm缓存损坏后，所有新建、本地项目的依赖解析都会出错
• 全局安装的@angular/cli版本与项目依赖的Angular v13版本不匹配，导致ng serve/ng build构建时调用了错误版本的编译器，无法识别内置模板能力
• IDE的Angular语言服务本地缓存损坏，仅在编辑器内飘红报错，实际项目编译运行可正常执行

按顺序操作，每完成一步验证一次问题是否解决，无需执行全部步骤：

• 清理全链路缓存
  打开终端依次执行以下命令，清除所有可能损坏的缓存文件：

  # 清理npm全局缓存
  npm cache clean --force
  # 清理Angular工作区缓存
  ng cache clean
  # 若使用yarn作为包管理工具，额外执行
  yarn cache clean
  

• 对齐全局Angular CLI版本
  执行ng version查看全局CLI版本，Angular v13必须搭配13.x大版本的CLI使用，跨大版本会直接出现编译器兼容问题。版本不匹配时执行以下命令重装：

  npm uninstall -g @angular/cli
  npm install -g @angular/cli@13.3.11
  

  这里指定13.3.11是v13大版本的最终稳定版，兼容问题最少。
• 修复项目依赖
  进入项目根目录，删除node_modules文件夹、package-lock.json（yarn用户删yarn.lock），重新执行依赖安装：

  npm install
  

  建议直接将Node.js版本升级到14.20.x，这是Angular v13官方推荐的LTS版本，可彻底规避Node 12.22上的偶发兼容问题。
• 修复IDE报错场景
  若仅IDE内飘红报错、实际ng serve运行无异常，直接重装IDE对应的Angular语言服务插件，重启IDE即可，属于语言服务本地缓存损坏的典型问题。

补充排查点：如果上述操作后单个项目仍报错，检查根模块AppModule是否正确导入了BrowserModule，特性模块不要重复导入BrowserModule，按需导入CommonModule即可。但新建项目默认配置不会出现该问题，此场景仅针对修改过模块配置的存量项目。

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