How to implement a Piral Angular component with templateUrl? - micro-frontend

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?