Angular how to make a selector recognized by a second component?

I have xxx.component file contains this code:

@Component({
  selector: 'app-two',
  template: '<p>hello</p>',
})
export class MyTwoComponent {
  constructor() {}
}
@Component({
  selector: 'app-my',
  template: '<app-two></app-two>', ->>>>Does not recognize this selector
})
export class MyPanelComponent extends MyTwoComponent {
  constructor() {
    super();
  }
}

The problem is that creates and error saying that it does not recognize the selector. I tried to use NgModule but gets worse. Any suggestions? Thank you.

UPDATE ONE I found the solution! But it needs to change standalone! And i can't do that in my case...

@Component({
  selector: 'app-two',
  standalone: true,
  template: '<p>hello</p>',
})
export class MyTwoComponent {
  constructor() {}
}
@Component({
  imports: [MyTwoComponent],
  selector: 'app-my',
  standalone: true,
  template: '<app-two></app-two>',
})
export class MyPanelComponent extends MyTwoComponent {
  constructor() {
    super();
  }
}