MicroFrontendProject

Angular library that allows easy communication between iframes. Designed for the development of micro frontends.

Run example project

Run npm i to install dependencies.

Run npm run build micro-frontend to build de library.

Run ng serve --port 4200 to serve father project

Run ng serve --port 4201 to serve child project

Run ng serve --port 4202 to serve father2-child2 project

Run ng serve --port 4203 to serve child3 project

Navigate to http://localhost:4200/

Example project explanation

In this example we have 4 angular projects running on different URLs.

The project is configured to act as parent (4200), parent's child (4201), parent child with it's own child (parent 2) (4202) and parent 2's child.

In this example we use library through MicroFrontendComponent to see some capabilities.

Install dependency

npm i @rgarciadelongoria/micro-frontend

Setting up parent.

<iframe #child src="http://localhost:4201" name="child"></iframe>

@ViewChild('child') iframeChild!: ElementRef;

constructor(private microFrontendSrv: MicroFrontendService) { }

ngOnInit(): void {
    this.microFrontendSrv.init();
    this.microFrontendSrv.getOnMessageObservable().subscribe((message: any) => {
        // Do something with the received message
    });
}

ngAfterViewInit(): void {
    this.microFrontendLibComponent.addMicroFrontend({elementRef: this.iframeChild});
}

Setting up child.

constructor(private microFrontendSrv: MicroFrontendService) { }

ngOnInit(): void {
    this.microFrontendSrv.init(['http://localhost:4200']);
    this.microFrontendSrv.getOnMessageObservable().subscribe((message: any) => {
        // Do something with the received message
    });
}