Creamos un widget como una aplicación Angular, que nuestros clientes deberían poder cargar e integrar fácilmente en su propio sitio web.

La forma más sencilla (que funciona) de hacer esto es simplemente decirles que incluyan las etiquetas HTML predeterminadas de index.html en su sitio web:

 <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>

Sin embargo, nos gustaría minimizar el código anterior y proporcionarles una línea que incluya un JavaScript que cargue el código dinámicamente en el DOM, por ejemplo, <div id="widget"></div><script src="https://ourdomain.com/widget/start.js"></script> . El script simplemente consistiría en:

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

Las etiquetas se cargan correctamente en el DOM, pero la aplicación Angular, es decir, los scripts que se incluyen dinámicamente en el DOM, no se cargan. ¿Cómo se puede resolver este problema? ¿Hay algún método en main.js que deba llamarse adicionalmente para arrancar la aplicación Angular?

La aplicación Angular se implementa y aloja en nuestro servidor, por ejemplo, en https://ourdomain.com/widget . El objetivo es que cualquiera pueda cargar y conectar la aplicación en su propio sitio web utilizando el enfoque anterior.