How to implement a Piral Angular component with templateUrl?

Question

I'm trying to implement a piral angular component using templateUrl.

I'm able to make it work with "template", but when I change to templateUrl it doesn't work.

All the documentation and examples provided by piral uses template.

This is my component with template:

    import { Component, Inject } from '@angular/core';
    
    @Component({
      template: `
        <div class="tile">
          <h3>Angular: {{ counter }}</h3>
          <p>
            {{ props.rows }} rows and {{ props.columns }} columns
            <extension-component name="smiley"></extension-component>
          </p>
          <button (click)="increment()">Increment</button>
          <button (click)="decrement()">Decrement</button>
        </div>
      `,
    })
    export class TileComponent {
      public counter = 0;
    
      constructor(@Inject('Props') public props: any) {}
    
      increment() {
        this.counter += 1;
      }
    
      decrement() {
        this.counter -= 1;
      }
    }

This is my component with templateUrl:

    import { Component, OnInit } from '@angular/core';
    
    @Component({
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class HelloWorldComponent implements OnInit {
      constructor() { }
      ngOnInit(): void {
      }
    }

I've tried adding selector to 'extension-component' but it doesn't work, I receive "Error: The selector "extension-component" did not match any elements"

Do you know if this is supported on Piral? Can anyone point me to a working example?