Microfrontend Architecture: Angular Guards

I have an application that uses a microfrontend architecture. In one specific microfrontend, I'm using Angular guards with the canDeactivate method. Here's an example:

const exampleRoutes: Routes = [
{
path: Config.Route.root.path,
component: ExampleMainComponent,
},
{
path: Config.Route.formExample.path,
component: ExampleFormComponent,
canDeactivate: [MyGuardService],
},
];

@NgModule({
imports: [RouterModule.forChild(exampleRoutes)],
exports: [RouterModule],
declarations: [],
providers: [],
})


It works perfectly when navigating to a route within the same microfrontend. However, when I try to access a route from another microfrontend, my guard doesn't trigger. Does anyone know if it is possible to make this work across different microfrontends?

Continue reading...