I created a library with angular 12. the library is using templateUrl.

I published the library to npm. I created another application with angular cli that uses this library and have no problem.

now I have another (old) application that uses SystemJs and commonjs. The problem I have is that SystemJs can not find the html file. it looks for it in the root folder.

by looking at the code I can see that the generated js file contains the html inline. but it also keeps the reference to the html file templateUrl: "./ngx-my-lib.component.html",

here is my ts file

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'lib-ngx-my-lib',
    templateUrl: "./ngx-my-lib.component.html",
    styles: []
})
export class NgxMyLibComponent implements OnInit {

    constructor() {
        console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
    }

    ngOnInit(): void {
    }

}

here is the generated file

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
    typeof define === 'function' && define.amd ? define('ngx-my-lib', ['exports', '@angular/core'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["ngx-my-lib"] = {}, global.ng.core));
})(this, (function (exports, i0) { 'use strict';

    function _interopNamespace(e) {
        if (e && e.__esModule) return e;
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () { return e[k]; }
                    });
                }
            });
        }
        n["default"] = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);

    var NgxMyLibService = /** @class */ (function () {
        function NgxMyLibService() {
        }
        return NgxMyLibService;
    }());
    NgxMyLibService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0__namespace, type: NgxMyLibService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
    NgxMyLibService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0__namespace, type: NgxMyLibService, providedIn: 'root' });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0__namespace, type: NgxMyLibService, decorators: [{
                type: i0.Injectable,
                args: [{
                        providedIn: 'root'
                    }]
            }], ctorParameters: function () { return []; } });

    var NgxMyLibComponent = /** @class */ (function () {
        function NgxMyLibComponent() {
            console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
        }
        NgxMyLibComponent.prototype.ngOnInit = function () {
        };
        return NgxMyLibComponent;
    }());
    NgxMyLibComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0__namespace, type: NgxMyLibComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
    NgxMyLibComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.0", type: NgxMyLibComponent, selector: "lib-ngx-my-lib", ngImport: i0__namespace, template: "<p>\r\n    ngx-my-lib works! using html file\r\n</p>\r\n" });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0__namespace, type: NgxMyLibComponent, decorators: [{
                type: i0.Component,
                args: [{
                        selector: 'lib-ngx-my-lib',
                        templateUrl: "./ngx-my-lib.component.html",
                        styles: []
                    }]
            }], ctorParameters: function () { return []; } });

    var NgxMyLibModule = /** @class */ (function () {
        function NgxMyLibModule() {
        }
        return NgxMyLibModule;
    }());
    NgxMyLibModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0__namespace, type: NgxMyLibModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
    NgxMyLibModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0__namespace, type: NgxMyLibModule, declarations: [NgxMyLibComponent], exports: [NgxMyLibComponent] });
    NgxMyLibModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0__namespace, type: NgxMyLibModule, imports: [[]] });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0__namespace, type: NgxMyLibModule, decorators: [{
                type: i0.NgModule,
                args: [{
                        declarations: [
                            NgxMyLibComponent
                        ],
                        imports: [],
                        exports: [
                            NgxMyLibComponent
                        ]
                    }]
            }] });

    /*
     * Public API Surface of ngx-my-lib
     */

    /**
     * Generated bundle index. Do not edit.
     */

    exports.NgxMyLibComponent = NgxMyLibComponent;
    exports.NgxMyLibModule = NgxMyLibModule;
    exports.NgxMyLibService = NgxMyLibService;

    Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=ngx-my-lib.umd.js.map

look at the generated code and see that it still reference the html file.

how can use this library with SystemJs and commonjs?