Angular 14.2.0原有功能失效，组件与表单等报错求助

1. 类装饰器签名解析错误 #

• 核对TypeScript版本：Angular 14.2.0要求TypeScript 4.7.x，确认package.json中typescript版本为~4.7.2或兼容版本，版本不匹配会直接导致装饰器语法解析失败。
• 校验组件装饰器语法：检查@Component装饰器的参数格式，比如selector是否为有效字符串、templateUrl/template路径是否正确，避免多余逗号或语法拼写错误。
• 调整tsconfig配置：确保tsconfig.json中compilerOptions.target设为ES2020或更高版本，lib数组包含ES2020和DOM，这会直接影响装饰器的解析逻辑。

2. 未知元素错误（已导入MatCardModule并添加Schema） #

• 确认MatCardModule导入范围：必须将MatCardModule添加到当前组件所属NgModule的imports数组中，懒加载模块需单独导入，仅在根模块导入无法覆盖子模块组件。
• 移除冗余Schema：CUSTOM_ELEMENTS_SCHEMA用于自定义元素，NO_ERRORS_SCHEMA会掩盖真实错误，若已正确导入MatCardModule，这两个Schema无需添加，反而会干扰语言服务的错误提示。
• 对齐Material版本：确保@angular/material版本与Angular核心版本完全一致（即14.2.x），版本不匹配会导致组件无法被识别。
• 重启IDE语言服务：编辑器缓存常导致假报错，执行VS Code的「重新加载窗口」（Ctrl+Shift+P → Reload Window）即可解决。

3. [formGroup]未知属性提示、@ViewChild写法切换时TS/HTML报错（编译正常） #

• 解决[formGroup]问题：将ReactiveFormsModule添加到当前NgModule的imports数组中，formGroup是响应式表单专属指令，必须依赖该模块才能被识别。
• 处理@ViewChild报错：
  • Angular 14中@ViewChild仍支持static参数，确保写法符合规范（如@ViewChild('ref', { static: false })）。
  • 若查询组件类型，需确保目标组件已在当前NgModule的declarations或imports中声明/导入。
• 清除编辑器缓存：此类「编译正常但编辑器报错」多为语言服务缓存问题，重启IDE或执行npx ng lint校验代码即可。
• 检查strictTemplates配置：若tsconfig.json中angularCompilerOptions.strictTemplates设为true，需确保模板中所有指令、组件都已正确导入，严格模式会强化模板类型检查。

4. tsconfig.json中emitDecoratorMetadata与experimentalDecorators配置冲突 #

• 统一配置值：在tsconfig.json的compilerOptions中，确保两个配置保持一致的启用/禁用状态，Angular开发通常需同时开启：

  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
  

• 检查配置继承：若项目存在多个tsconfig文件（如tsconfig.app.json继承tsconfig.json），需确认子配置未覆盖父配置的这两个属性，导致冲突。
• 排查第三方工具影响：部分ESLint规则或插件可能对装饰器配置有特殊要求，可临时禁用相关规则验证是否解决冲突。

通用排查步骤 #

• 确认所有@angular/*、@angular/material等核心依赖版本统一为14.2.x，避免版本不一致引发的兼容性问题。
• 执行npx ng cache clean清除Angular CLI缓存，再重新执行npm install安装依赖。
• 若使用yarn，执行yarn cache clean后重新安装依赖。

内容的提问来源于stack exchange，提问作者Peter The Angular Dude