I have updated my angular app from 13 to 14. After update i am getting below error after opening component class in vs code.
Class is using Angular features but is not decorated. Please add an explicit Angular decorator
I have checked this question
But i have not using any ineritance in the app.
But the application run perfectly. How to remove that error?
ts.confing
/* 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 component
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;
}
}
Had the same issue. Typescript downgrade from 4.7.4 to 4.7.2 resolved the problem.
npm i typescript@4.7.2
it is due to Angular Language Service extension, it does not support Typescript 4.8
yet, see related issue here: https://github.com/angular/vscode-ng-language-service/issues/1746
I had the same problem, i resolve it by downgrading typescript dependencies:
"@typescript-eslint/eslint-plugin": "5.29.0",
"@typescript-eslint/parser": "5.29.0",
"typescript": "4.7.2"
now the error is gone and all is working perfectly
Same issue with Angular 15. This time upgrading typescript from 4.8.2 to 4.8.4 solved the problem.
initially i had typescript 4.8.4 when hitting this problem. after i read through here, I downgraded to 4.7.2, didn't work; then I went back to 4.8.4, interestingly it worked.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.