Best way to integrate different Angular applications with SSG and SSR

I have a shell application in Angular that currently renders applications in web component mode, using ax-lazy-element (Angular Extensions Elements). All communication between the parent shell application and the webcomponent application is done via Input and Output events to the application.

Code Application WebComponent

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

Dynamically load the web component in app shell

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

Traffic Input and Output Data

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');
  }
}

I also want to allow and load Angular applications with SSR and SSG within my shell application. In this case, I have doubts about what would be the best way to integrate these applications within my shell app and communicate and receive events in this model.

I thought about using Iframes with PostMessage, but that is very ugly... Can I use other ways to meet this scenario?