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 :-

Answer 1

While the accepted answer is correct in using @Component, one minor downside is that it requires all constructor argument types to be resolvable by DI. So if your base class constructor takes a constant/literal - say, an enum - as a flag, you're going to have to set up a corresponding DI provider/token just to get it to compile.

You can however also resolve NG2007 using the @Directive decorator instead, which doesn't require DI compatibility

Answer 2

With Angular 10, you can fix this issue by adding the decorator @Injectable() to your abstract base class like this:

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

Answer 3

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:

@Component({
  template: ''
})
export abstract class BaseComponent {

    @Input() teamName: string;
    @Input() teamSize: number;
    @Input() players: any;
}