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?

Continue reading...