We created a widget as an Angular app, which our customers should be able to easily load and integrate into their own website.

The most straightforward way (which works) to do this is simply to tell them to include the default HTML tags from the index.html on their website:

<base href="/">
<app-root></app-root>
<script src="https://ourdomain.com/widget/runtime.js" type="module"></script><script src="https://ourdomain.com/widget/polyfills.js" type="module"></script><script src="https://ourdomain.com/widget/main.js" type="module"></script>

However, we would like to minimize the above code and provide them a one-liner which includes a JavaScript that loads the code dynamically into the DOM, e.g. <div id="widget"></div><script src="https://ourdomain.com/widget/start.js"></script>. The script would simply consist of:

<script>
document.getElementById('widget').innerHTML = '<base href="/"><app-root></app-root>...';
</script>

The tags are loaded correctly into the DOM but the Angular app i.e. the scripts which are dynamically included into the DOM don't load. How can this problem be solved? Is there a method in main.js which needs to be called additionally to bootstrap the Angular app?

The Angular app is deployed and hosted on our server, e.g. on https://ourdomain.com/widget. The goal is that anyone can load and plug the app into their own website using the above approach.