How to import 2 or more Angular component with plain JS?

Question

I built an Angular (last version) component I need to import several time into an old school HTML/JS page.

At the moment this Angular component is an HelloWorld component, and when the user clicked a specific element on the plain HTML page I would like to append a new instance of my HelloWorld component:

<div onclick="divClicked()">Click here to add more component!</div>

At the moment it works for the first click with following code, but not for the others clics:

    function divClicked(e) {
        body = document.getElementById("dest")
        app = document.createElement("app-root")
        body.append(app)

        loadScript("dist/angular-app/runtime.js")
        loadScript("dist/angular-app/polyfills.js")
        loadScript("dist/angular-app/main.js")

        console.log("Div clicked", body)
    }

    function loadScript(url) {
        var script = document.createElement('script');
        script.onload = function () {
            console.log("Script loaded", url)
        };
        script.src = url;

        document.head.appendChild(script);
    }

Following clics generates the app-root tag but it's not populate with Angular's content. See the generated DOM below:

How can I use many time my component into a pure HTML/JS page?

Answer 1

Hi please use angular elements.

You can build and make it single js file which you refer in plain HTML and use angular component.

Please find below solution:

https://dev.to/maulik/using-angular-component-in-non-angular-app-1p0g