Issue with Angular 13 and an abstract class inheriting from DialogContentBase

[Murray]

Hi there, I have migrated my project from Angular 11 to Angular 13 using v7.0.0 of the DialogModule. 

If I define an abstract class like so:

@Directive()
export abstract class MyAbstractDialog extends DialogContentBase {

}

Then I define a concrete implementation of this class like so

@Component(...)

export class MyConcreteDialog extends MyAbstractDialog {

}

This ran happily using Angular 11. But with Angular 13, at runtime I see the following exception:

 

Directives cannot inherit Components. DirectiveMyAbstractDialog  is attempting to extend component DialogContentBase 

ERROR Error: Uncaught (in promise): Error: NG0903
Error: NG0903
    at ɵɵInheritDefinitionFeature (core.mjs:12388:23)
    at core.mjs:926:48
    at Array.forEach (<anonymous>)
    at Object.toString (core.mjs:926:32)
    at noSideEffects (core.mjs:592:29)
    at Module.ɵɵdefineComponent (core.mjs:882:12)

 

Do you know why this might be? Does DialogContentBase need a Directive() decorator to get this working? The work around I have found is to duplicate the common code in the base class into each of it's descendants and remove the abstract class. But I don't really want to be duplicating code!

 

 

Thanks

 

[Dimiter Madjarov]

Hi Murray,

The observed behaviour is caused by the recent Ivy migration of the Kendo UI for Angular packages. Ivy formatted Angular packages require all base classes to be decorated as either directives or components. Thus, the DialogContentBase class is currently converted to a component, as the Dialog content itself is intended to be a component by design.

The current implementation could be resolved by decorating the class that extends the DialogContentBase as a component. Full explanation is available in the following GitHub issue:

https://github.com/telerik/kendo-angular/issues/3671#issuecomment-1128734988

Let me know if I could provide further assistance regarding the case.

Regards,
Dimiter Madjarov
Progress Telerik

[Narendar]

I'm also facing issue when I'm trying to use Scheduler module, it is throwing below error when I'm upgrading buttons version to 14.3.0. Please let me know, how to fix this issue. Angular version of mine is 14.2.12