VSCode报@angular/Material组件未知但ng serve运行正常

VSCode中打开Angular项目时HTML文件出现大量静态检查报错，但ng serve构建运行完全正常，典型报错包括：

• Angular Material组件识别失败：
  • 'mat-menu' is not a known element
  • 'mat-tab-group' is not a known element
  • <router-outlet>被提示为未知元素
• Angular内置指令识别失败：
  • Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".
  • Can't bind to 'ngForOf' since it isn't a known property of 'div'.
• 已确认shared/material.module、shared/shared.module的导入导出配置、路由配置完全正确，报错前未改动相关配置文件，语法编写无错误。

所有报错均为VSCode侧Angular静态检查服务索引异常导致，和业务代码、项目配置无关：项目构建运行正常即可证明代码层面无问题。常见触发场景包括TypeScript服务缓存损坏、Angular语言服务索引失效、工作区根目录识别错误、语言服务扩展版本与本地Angular版本不兼容。

按优先级从高到低依次尝试，多数场景前两步即可解决问题：

• 重启TypeScript服务：按下Ctrl+Shift+P（Mac系统为Cmd+Shift+P）调出命令面板，搜索执行TypeScript: Restart TS Server，等待10-30秒待服务重新完成索引，报错会自动消失。
• 校验工作区打开路径：确认VSCode打开的根目录是包含angular.json文件的项目根目录，不要打开项目的上层父文件夹，否则语言服务无法读取Angular项目配置，无法识别跨模块导入的组件、指令。
• 校验Angular语言服务配置：打开VSCode中Angular Language Service扩展的设置页，若本地使用Angular 13+版本，关闭Angular: Legacy View Engine选项；若使用Angular 12及以下版本，开启该选项，保证语言服务模式和本地Angular编译模式一致。
• 清理本地缓存：关闭VSCode，删除项目根目录下的.angular缓存文件夹，执行包管理器安装命令（npm install/yarn install/pnpm install）重建依赖索引后重新打开项目。
• 扩展重装：若以上方法均无效，卸载Angular Language Service扩展后重新安装，重启VSCode即可。

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