Estoy investigando cómo dividir un enorme monolito de una sola página en una arquitectura de micro frontend.

La idea:la página consta de varios componentes que se ejecutarían de forma autónomacada componente es administrado por un equipo de desarrollocada equipo puede cambiar, actualizar e implementar sus componentes sin romper los componentes de otros equiposcada equipo elige su propio conjunto de herramientasLa razón

Para desarrollar aplicaciones grandes de manera eficiente, necesita que muchas personas trabajen en ellas. Sin embargo, el número de desarrolladores por aplicación / equipo no escala bien. Sin embargo, el desarrollo paralelo de múltiples aplicaciones independientes por equipos independientes se puede escalar arbitrariamente

Con esto en mente, es imperativo que los equipos puedan elegir su propio conjunto de herramientas y especialmente realizar actualizaciones de versiones independientes de bibliotecas de terceros (como angular, react, jquery). Si este no fuera el caso, una actualización del marco debería ser compatible con cada componente antes de poder implementarlo en producción.

¿Funciona esto con Angular?

Si bien las actualizaciones de versiones independientes son necesarias, sería razonable restringir los equipos a unos pocos marcos compatibles (Angular, React, Vue, Polymer ...) y por ahora trato de construir una demostración que consista exclusivamente en Angular-Apps.

Sin embargo, aunque Angular 5 es supuestamente un marco de plataforma que admite enormes aplicaciones de múltiples módulos, parece ser casi imposible tener varias aplicaciones angulares independientes ejecutándose en la misma ventana del navegador.

Logré arrancar varias aplicaciones angulares (diferentes versiones, cada una alojada en su propio servidor) en una sola aplicación web utilizando HTML-Imports. Sin embargo hay variosglobal dependencias que deben compartirse entre aplicaciones

zone.js solo se puede iniciar una vezel enrutamiento requiere cambios de URLCosas del navegador como cookies, almacenamiento de sesiones, etc.

Hay varios artículos en la red sobre cómo arrancar múltiples módulos angulares, pero todos se refieren a múltiples módulos en la misma aplicación central, lo que a su vez significa que todos se ejecutan en la misma versión de marco y una actualización significa que debe reconstruir y desplegar todo el monolito.

¿Hay alguna otra solución que no sea "iframes"para ejecutar múltiples aplicaciones Angular (5) en la misma página?