Angular组件报错：类使用Angular特性但未添加装饰器，组件自动补全失效

针对你遇到的「Class is using Angular features but is not decorated」错误，以及HTML组件自动补全失效的问题，给出以下排查和解决步骤：

1. 确认组件装饰器的正确性 #

• 确保组件类顶部正确导入并使用@Component装饰器，检查是否存在拼写错误、漏写@符号，或者装饰器位置错误（必须放在类定义之前）。CLI生成的组件默认是正确的，但手动修改时可能误改，正确示例：

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
  })
  export class TestComponent implements OnInit {
    ngOnInit(): void {
      // 业务逻辑
    }
  }
  

• 排查是否不小心注释掉了@Component装饰器，或者将其移到了类定义之后。

2. 检查tsconfig.json关键配置 #

• 打开项目根目录的tsconfig.json，确保compilerOptions中以下两个选项为true（Angular装饰器依赖这两个配置）：

  "compilerOptions": {
    // 其他配置...
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
  

• 同时检查angularCompilerOptions，如果开启了过高的严格模式（比如strictTemplates），可以暂时设置为false排查是否是严格模式导致的误报。

3. 确保Angular与TypeScript版本兼容 #

• Angular版本和TypeScript版本有严格的兼容要求，比如：
  • Angular 14 对应 TypeScript 4.6.x ~ 4.8.x
  • Angular 15 对应 TypeScript 4.8.x ~ 4.9.x
• 运行ng version查看当前项目中@angular/core、@angular/cli和typescript的版本，若不匹配，执行对应版本的安装命令（比如Angular 14 + TS 4.7.2）：

  npm install @angular/cli@14.x @angular/core@14.x typescript@4.7.2 --save-exact
  

4. 清理IDE缓存与重启服务 #

• HTML自动补全失效大概率是IDE缓存问题，以VS Code为例：
  1. 打开命令面板（Ctrl+Shift+P），执行TypeScript: Restart TS Server
  2. 关闭VS Code，删除项目根目录下的.angular/cache和.vscode文件夹（建议先备份），重新打开项目
  3. 确保VS Code的「Angular Language Service」插件为最新版本，该插件负责组件标签的自动补全

5. 排查第三方库或自定义代码干扰 #

• 如果项目中使用了第三方装饰器或自定义装饰器，可能与Angular的装饰器逻辑冲突，可暂时移除第三方库，观察错误是否消失，定位问题来源。
• 检查组件类是否误加了其他Angular装饰器（比如@Injectable），组件类仅需使用@Component装饰器。

6. 对比干净项目排查配置差异 #

• 用ng new clean-test生成一个全新的Angular项目，生成测试组件ng g component demo，若该项目无错误，对比两个项目的tsconfig.json、package.json文件，找出当前项目的配置差异并修正。

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