Estou fazendo uma pesquisa sobre como dividir um enorme monólito de página única em uma arquitetura de micro front-end.

A ideia:a página consiste em vários componentes que seriam executados de forma autônomacada componente é gerenciado por uma equipe de desenvolvimentocada equipe pode alterar, atualizar e implantar seus componentes sem interromper os componentes de outras equipescada equipe escolhe sua própria pilha de ferramentasO motivo

Para desenvolver eficientemente aplicativos grandes, você precisa ter muitas pessoas trabalhando nele. No entanto, o número de desenvolvedores por aplicativo / equipe não é bem dimensionado. O desenvolvimento paralelo de vários aplicativos independentes por equipes independentes, no entanto, pode ser escalado arbitrariamente

Com isso em mente, é imprescindível que as equipes possam escolher sua própria pilha de ferramentas e, principalmente, executar atualizações independentes de versões de bibliotecas de terceiros (como angular, reagir, jquery). Se não fosse esse o caso, uma atualização da estrutura precisaria ser compatível com todos os componentes antes que você pudesse implantá-la na produção.

Isso funciona com o Angular?

Embora sejam necessárias atualizações independentes de versão, seria razoável restringir as equipes a algumas estruturas suportadas (Angular, React, Vue, Polymer ...) e, por enquanto, tento criar uma demonstração puramente composta por aplicativos angulares.

No entanto, embora o Angular 5 seja supostamente uma estrutura de plataforma que suporta grandes aplicativos de múltiplos módulos, parece ser quase impossível ter vários aplicativos angulares independentes em execução na mesma janela do navegador.

Consegui inicializar vários aplicativos angulares (versões diferentes, cada um hospedado em seu próprio servidor) em um único aplicativo da Web, utilizando HTML-Imports. No entanto, existem váriosglobal dependências que precisam ser compartilhadas entre aplicativos

O zone.js pode ser iniciado apenas uma vezo roteamento requer alterações de URLCoisas do navegador, como cookies, armazenamento de sessão, etc ...

Existem vários artigos na rede sobre como inicializar vários módulos angulares, mas todos eles se referem a vários módulos no mesmo aplicativo principal, o que, por sua vez, significa que todos estão sendo executados na mesma versão de estrutura e uma atualização significa que você precisa reconstruir e implantar todo o monólito.

Existe outra solução além de "iframes"para fazer com que vários aplicativos angulares (5) sejam executados na mesma página?