angular route with module federation

Question

I am working on a module federation project.

mfe1: ParentApp mfe2: childApp1 mfe3: childApp2 mfe4: childApp3(parent of ChildApp1)

childApp1 and childApp3 and childApp2 all have routing modules which will navigate to different pages.

My question is how does the parent app know that chdildApp3 changed its routing and ParentApp also needs to change its route?

All the childApp(s) routing path need to be maintained in ParentApp webpack config or there is an alternative way?

Any suggestion is greatly appreciated.

Thanks

Answer 1

how does the parent app know that chdildApp3 changed its routing and ParentApp also needs to change its route

One way would be to fire a custom event from your child app & register to that event in your parent app.

In parent app.component.ts:

@HostListener('window:childRoutechanged',['$event'])
  onChildRouteChange(event)
  {
    
    if(event && event.detail)
    {
      this.location.go(event.detail.microApp+event.detail.route); //Update the url path and also add it to browser's history without actually invoking router
    }
  }

In child app's main component file (app.component.ts):

 this.router.events.pipe(
      filter(event=>
        {
          return event instanceof NavigationEnd;
        })
    ).subscribe((event:NavigationEnd)=>
      {
        // create custom event in your micro app. & dispatch it whenever 
          your route changes & you want parent to listen to it
          const routeChangeEv = new CustomEvent('childRoutechanged', {
              detail: {
                microApp: 'child3',
                route:'my/custom/route'
              }
           });
          window.dispatchEvent(routeChangeEv);
      })