menu

Questions & Answers

Angular 15 components when trying to use OnInit:"Class is using Angular features but is not decorated. Please add an explicit Angular decorator"

I set up angular 15 and the components seem to have issues with using lifecycle hooks eg OnInit, giving 'Class is using angular features but is not decorated. Please add an explicit Angular decorator' error.

code sample Component code:

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

@Component({
 selector: 'app-nav',
 templateUrl: './nav.component.html',
 styleUrls: ['./nav.component.css']
 })
export  class NavComponent implements OnInit {

  ngOnInit(): void {
    throw new Error('Method not implemented.');
  }


 }

packages:

  {
  "name": "new",
 "version": "0.0.0",
 "scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "watch": "ng build --watch --configuration development",
 "test": "ng test"
 },
 "private": true,
 "dependencies": {
 "@angular/animations": "^15.0.0",
 "@angular/common": "^15.0.0",
 "@angular/compiler": "^15.0.0",
 "@angular/core": "^15.0.3",
 "@angular/forms": "^15.0.0",
 "@angular/platform-browser": "^15.0.0",
 "@angular/platform-browser-dynamic": "^15.0.0",
 "@angular/router": "^15.0.0",
 "rxjs": "~7.5.0",
 "tslib": "^2.3.0",
 "zone.js": "~0.12.0"
  },
  "devDependencies": {
 "@angular-devkit/build-angular": "^15.0.0",
 "@angular/cli": "~15.0.0",
  "@angular/compiler-cli": "^15.0.0",
  "@types/jasmine": "~4.3.0",
  "jasmine-core": "~4.5.0",
  "karma": "~6.4.0",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage": "~2.2.0",
  "karma-jasmine": "~5.1.0",
  "karma-jasmine-html-reporter": "~2.0.0",
  "typescript": "~4.8.2"
   }
 }

I tried update and downgrading @angular/core and typescript If I install typescript version less than 4.8 the error disappear but ng serve need typescript version from 4.8.2 upwards to run
the error occurs after ngcc finished to run

Comments:
2023-01-19 17:42:02
Are you using the correct import path '@angular/core' for @Component?
2023-01-19 17:42:02
the path I am using: import { Component, OnInit } from '@angular/core';
2023-01-19 17:42:02
Can you include the full code sample here please? That way if the link is ever offline, the question still holds value for future readers.
2023-01-19 17:42:02
Are you using any abstract class ?
2023-01-19 17:42:02
No I am not using abstract class
2023-01-19 17:42:02
The issue seems to be caused by typescript version. I downgraded to version 4.7.4 and the error disappeared, but ng serve requires typescript version 4.8.2 to <4.9
2023-01-19 17:42:02
Are you sure that this is a real problem and not related to VS code cache or something? Did you restart your PC? :D
2023-01-19 17:42:02
Yes, I think so because I tried to uninstall @angular/cli, cleaning cache and reinstall again, but the problem seems to persist
Answers(1) :

I'm having the same problem and I don't know how to fix it

Comments:
2023-01-19 17:42:03
Francesco, please don't add Me too as answers. It doesn't actually provide an answer to the question. If you have a different but related question, then ask it (reference this one if it will help provide context). If you are interested in this specific question, you can upvote it, leave a comment, or start a bounty once you have enough reputation.