8

I recently upgraded my Angular app from v9 to v10.

I noticed that undecorated classes are not supported anymore. See here

So during ng upgrade my abstract components without decorates have been changed to have a @Directive() decoratror.

For example

export abstract class AbstractFormControl implements ControlValueAccessor { ... }

was changed into

@Directive()
export abstract class AbstractFormControl implements ControlValueAccessor { ... }

Why does Angular use @Directive. Wouldn't @Component be a better way because the class is rather a Component than a Directive? What was the intention?

Rose Nettoyeur
  • 885
  • 1
  • 16
  • 29
  • 4
    A component is essentially a directive with template. When the base class doesn't have an associated template, it makes more sense to decorate it as a directive rather than a component. If you need to know _why_ this change is required, you could see [here](https://angular.io/guide/migration-undecorated-classes#why-is-this-migration-necessary). – ruth Sep 01 '20 at 12:03

1 Answers1

5

Component requires you to specify template or templateUrl, which cannot be used with an abstract class.

As mentioned in the comments - Component is a special type of Directive. So it is okay to inherit from an abstract Directive.

kvetis
  • 6,682
  • 1
  • 28
  • 48
  • It looks to me like `@Component({ template: '' })` works fine as a decorator for abstract classes in Angular 12, even though `@Directive` may be preferred. – Christian Davén Nov 19 '21 at 11:02
  • I don't know what is the impact of that - does it mean you would be able to route to it for example. The recommended way from Angular team was to use Directive and therefore the migration changed added @Directive – kvetis Nov 19 '21 at 11:55