Angular html file not found in component library

I've got an issue that is directly related to your one: Build Angular module with rollup.js: external html template file won't work (404). Then here I found a meaningful thread on this topic, and moving from link to link I saw the official document Angular Package Format (APF) v5.0, containing following:

Inlining of templates and stylesheets
Component libraries are typically implemented using stylesheets and html templates stored in separate files. While it's not required, we suggest that component authors inline the templates and stylesheets into their FESM files as well as *.metadata.json files by replacing the stylesheetUrls and templateUrl with stylesheets and template metadata properties respectively. This simplifies consumption of the components by application developers.

The way that allows you to use external templates/styles is based on deep customization of the build process, which should provide an artificially inlining of your external temlates/styles before compilation. The examples could be found on that GitHub thread (one man even published his solution on npm with 1k downloads per month). A useful approach is in my SO thread...

But I decided to take the middle path:

my.component.ts

import template from './my.component.temlate.html'
import style from './my.component.temlate.css'

@Component({
  selector: 'app-my-component',
  template: template + '',
  styles: [style + '']
})

my.component.temlate.html.ts

export default `
<div data-padding-top></div>
...
`

my.component.temlate.css.ts

export default `
:host {
  overflow-anchor: none;
  overflow-y: auto;
}
`