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

Question

I have some components like CricketComponent, FootballComponent, TennisComponent etc. All These Classes have some common properties :- TeamName, teamSize, players etc which are @Input().

Now I created a BaseComponent class, defined all these properties in there and this baseComponent class will be extended by cricket/football/tennis/etcComponents.

baseComponent.ts

export class BaseComponent {      @Input() TeamName: string;     @Input() teamSize: number;     @Input() players: any;  } 

CricketComponent.ts

@Component({   selector: 'app-cricket',   templateUrl: './cricket.component.html',   styleUrls: ['./cricket.component.scss'] }) export class cricketComponent extends BaseComponent implements OnInit {    constructor() {     super();   }    ngOnInit(): void {   }  } 

I am getting this error:

ERROR in src/app/base-screen.ts:4:14 - error NG2007:

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

Answer 1

You'll need to add a @Component decorator to that base class (which should probably also be declared abstract).

This is the bare minimum you can get away with in Angular 9:

@Component({   template: '' }) export abstract class BaseComponent {      @Input() teamName: string;     @Input() teamSize: number;     @Input() players: any; } 

For Angular 10+, see this answer.