升级TypeScript 4.8.2后Angular组件触发未装饰特性错误

以下是几个经过验证的解决方案，按优先级尝试：

• 确认Angular与TypeScript版本兼容性
  Angular对TypeScript版本有严格适配要求，TS 4.8.2需要搭配Angular 14.2及以上版本使用。如果你的Angular版本低于14.2，要么降级TS到对应兼容版本，要么升级Angular到支持TS 4.8的版本。

• 修改tsconfig.json配置
  在compilerOptions中添加"useDefineForClassFields": false：

  "compilerOptions": {
    // 其他原有配置...
    "useDefineForClassFields": false
  }
  

  TypeScript 4.8默认启用了useDefineForClassFields，这会改变类字段的初始化逻辑，导致Angular的装饰器检测逻辑异常。关闭该选项可恢复之前的行为。

• 检查组件装饰器的导入与使用
  确保每个组件类的@Component装饰器是从@angular/core正确导入的，无拼写或路径错误。例如：

  import { Component, OnInit } from '@angular/core';
  

  同时确认装饰器直接紧邻组件类上方，中间未插入其他代码（如额外变量声明、函数）。

• 清理项目缓存与依赖

  1. 删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件
  2. 重新执行npm install（或yarn install）
  3. 运行ng clean清理Angular构建缓存后重新构建项目

内容的提问来源于stack exchange，提问作者François