The LuigiAutoRoutingService enables synchronization between your Angular application's internal routing and the Luigi micro frontend framework. This is achieved by configuring route data properties in your Angular router.
Route Configuration Options
| Data Key | Description |
|---|
fromVirtualTreeRoot: true | Updates Luigi when the component loads using linkManager().fromVirtualTreeRoot().withoutSync().navigate() |
fromVirtualTreeRoot: { truncate: '...' } | Truncates the route before sending to Luigi. Supports * for truncation after the first occurrence of a string. |
luigiRoute: '/path' | Navigates to a specific Luigi route using linkManager().withoutSync().navigate() |
luigiRoute: '/path', fromContext: true | Navigates using linkManager().fromClosestContext().withoutSync().navigate() |
luigiRoute: '/path', fromContext: 'localContext' | Navigates using linkManager().fromContext('localContext').withoutSync().navigate() |
Customizing Route Reuse
The library provides LuigiRouteStrategy, which is an implementation of Angular's RouteReuseStrategy. To customize how routes are reused, extend it:
export class YourRouteStrategy extends LuigiRouteStrategy {
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
super.retrieve(route);
// custom logic
}
}
// In your providers
{ provide: RouteReuseStrategy, useClass: YourRouteStrategy }
Auto-routing for Modals
If your routes use a modalPathParam, you can enable automatic URL updates and history management by adding these flags to the route data:
updateModalDataPath: true: Updates the URL automatically when navigating within the modal.addHistoryEntry: true: Adds a new entry to the browser history for modal changes.
{
path: 'my-modal-route',
component: MyModalComponent,
data: { updateModalDataPath: true, addHistoryEntry: true }
}
{path: 'sample4', component: Sample1Component, data: { luigiRoute: '/home/sample4' }}
