Angular壳应用集成SSR/SSG应用的最优方案与通信方式咨询

现有架构（Web Component模式） #

我有一个Angular壳应用，目前采用Web Component模式渲染子应用，使用ax-lazy-element。壳应用与Web Component子应用间的所有通信均通过Input和Output事件实现。

Web Component子应用代码 #

import { Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';

const element = createCustomElement(AppComponent, { injector });
customElements.define('my-microfrontend', element);

壳应用中动态加载Web Component #

<my-microfrontend
  *axLazyElement="['https://cdn.example.com/microfrontend.js']"
  [inputProp]="data"
  (outputEvent)="handleEvent($event)">
</my-microfrontend>

Input/Output数据交互代码 #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div>{{ inputProp }}</div>`,
})
export class AppComponent {
  @Input() inputProp: string;
  @Output() outputEvent = new EventEmitter<string>();

  someMethod() {
    this.outputEvent.emit('some data');
  }
}

需求与问题 #

我希望在该壳应用中加载并集成采用SSR（服务器端渲染）和SSG（静态站点生成）模式的Angular应用，但不确定此类场景下的最优集成方式及通信方案。

我曾考虑使用Iframe结合PostMessage实现，但该方案体验不佳，是否存在其他可行方案？

内容的提问来源于stack exchange，提问作者fixesMyCode