Activated route access of MFE into shell application

[yashnarang16]

Hi,
First of all this is perfect for our use case. Thanks for making this possible but here i am in situation where i need to access activated route data of MFE into shell. Could you please help to understand is there any way i can pass with this architecture ?

[fboeller]

Hi @yashnarang16 !
It is possible to listen to route changes of the micro frontend in the shell via the web component output routeChange like this:

import { Component } from '@angular/core';
import { RouterEvent } from 'ngx-elements-router';

@Component({
  selector: 'app-host',
  template: `
    <mf-entry aerRouting aerZone (routeChange)="handle($event)"></mf-entry>
  `,
})
export class MicroFrontendHostComponent {
  handle(event: { detail?: RouterEvent }) {
    console.log('MFE Event: ', event);
  }
}

The router event contains the active url of the micro frontend like /micro-frontend/child of the example app. Is this sufficient for your use case?
If you need more data like the data resolved by the micro frontend resolvers on that route, I'm afraid that's not transferred to the shell at the moment. You could pass however any additional data via own outputs in the micro frontend entry component.

[yashnarang16]

Able to solve this by creating a bridge between MFE and shell. Used one custom @output event emitter and emit the activated route from MFE to Shell .
Thanks alot for your support

Thanks,
Yash