Angular 13升级至14后VS Code中出现「类使用Angular特性但未添加显式装饰器」错误的解决咨询

我把Angular应用从13版本升级到14版本后，在VS Code里打开组件类时，总会弹出这个错误提示：

Class is using Angular features but is not decorated. Please add an explicit Angular decorator

奇怪的是，我的应用没有用任何继承机制，而且本身运行完全正常，就是这个编辑器提示看着闹心，有没有办法消除它？

我的tsconfig配置文件 #

/* To learn more about this file see: https://angular.io/config/tsconfig . */
{ 
 "compileOnSave": false, 
 "compilerOptions": { 
 "baseUrl": "./", 
 "outDir": "./dist/out-tsc", 
 "forceConsistentCasingInFileNames": false, 
 "strict": false, 
 "allowSyntheticDefaultImports":true, 
 "noImplicitOverride": true, 
 "noPropertyAccessFromIndexSignature": true, 
 "noImplicitReturns": true, 
 "noFallthroughCasesInSwitch": true, 
 "sourceMap": true, 
 "declaration": true, 
 "downlevelIteration": true, 
 "experimentalDecorators": true, 
 "moduleResolution": "node", 
 "importHelpers": true, 
 "target": "es2022", 
 "module": "es2022", 
 "lib": [ "es2022", "dom" ], 
 "paths": { "stream": [ "./node_modules/stream-browserify" ] }, 
 }, 
 "angularCompilerOptions": { 
 "enableI18nLegacyMessageIdFormat": false, 
 "strictInjectionParameters": true, 
 "strictInputAccessModifiers": true, 
 "strictTemplates": false, 
 } 
}

出现问题的Validation组件代码 #

import { Component, Input } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { ValidationService } from 'src/app/core/services/validation.service';

@Component({
 selector: 'app-validation-message',
 template: '<div *ngIf="errorMessage !== null" style="width:50%;margin-top:.25rem;font-size:80%;color:#dc3545">{{errorMessage}}</div>'
})
export class ValidationMessageComponent {
 @Input() control: AbstractControl;
 constructor() { }
 get errorMessage() {
 if (this.control.errors) {
 for (let propertyName in this.control.errors) {
 if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
 return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
 }
 }
 }
 return null;
 }
}

可行的解决办法 #

我之前也碰到过一模一样的情况，这大概率是VS Code的Angular Language Service（ALS）和升级后的Angular版本不兼容导致的编辑器假阳性提示，不是你的代码真的有问题。可以按顺序试试下面这几个方案：

• 更新Angular Language Service插件：打开VS Code的扩展面板，找到「Angular Language Service」，检查并更新到最新版本。ALS有时候对新版本Angular的支持会滞后，更新后这类误判提示通常会消失。

• 重启Angular语言服务：按Ctrl+Shift+P（Windows/Linux）或者Cmd+Shift+P（Mac）打开命令面板，输入「Restart Angular Language Service」并执行，强制刷新语言服务的缓存——缓存紊乱是这类提示的常见诱因。

• 调整tsconfig的angularCompilerOptions：在你的angularCompilerOptions里添加"strictMetadataEmit": false，这个配置会关闭严格的元数据生成校验，能有效避免ALS对装饰器的误判。修改后的配置段如下：

"angularCompilerOptions": { 
 "enableI18nLegacyMessageIdFormat": false, 
 "strictInjectionParameters": true, 
 "strictInputAccessModifiers": true, 
 "strictTemplates": false,
 "strictMetadataEmit": false
 } 

• 优化输入属性的类型定义：虽然你的代码逻辑没问题，但ALS对未初始化的输入属性可能会过度敏感。可以尝试把@Input() control: AbstractControl;改成@Input() control?: AbstractControl;（添加可选标记），不过这个调整需要结合你的业务逻辑确认是否可行。

如果以上方案都无效，可以试试删除node_modules和package-lock.json，重新执行npm install，然后重启VS Code——依赖缓存的异常也可能引发这类编辑器提示。

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