Temos um projeto Angular v11.x e um componente está sendo exportado para ser utilizado em outro projeto via "Angular Elements" - código abaixo. Ou seja, a ideia é reutilizar este componente através de microfrontend. No entanto, ao importar este microfrontend em outro projeto Angular v11.x, a aplicação sobrepõe o projeto que está sendo executado.
ngDoBootstrap(): void {
const renderFormApp = createCustomElement(MicroappComponent, {
injector: this.injector,
});
customElements.define('app-form-dinamico-sc-digital', renderFormApp);
}
Com base em algumas buscas na web, encontrei algumas respostas que justificam esse comportamento de "sobrescrever" a aplicação que injeta o microapp por causa do polyfills (e, aparentemente, apenas uma aplicação com polyfills ativado é executada por vez). Como ambas as aplicações estão configuradas como "apps", quando uma é injetada na outra, apenas uma consegue ser executada.
Alguém teria alguma sugestão pra contornar esse problema ou sugestão de solução alternativa?