Shell UI Router
Overview
The Shell UI Router acts as the central orchestrator, building the workspace and setting up routing based on backend configuration. It maps application paths to their respective microfrontend modules. At runtime, it uses Module Federation to dynamically load the required module when a route is activated. The loaded module is then rendered in the content area, enabling independent deployment and seamless navigation.
Workspace and Route Configuration
The Shell UI Router builds the workspace using configuration data provided by backend services. This configuration contains all applications registered for a workspace along with their associated paths.
Each application must define a unique path. This path is used by the Shell UI Router to create routing rules and to identify which microfrontend module should be loaded for a given URL.
Based on this configuration, the Shell UI Router maps each path to its corresponding microfrontend module. These mappings form the foundation for routing and ensure that the correct module is loaded when a user navigates within the workspace.
Router Initialization
Before handling any navigation, the Shell UI Router initializes the router using the workspace configuration. It reads the configured application paths and creates routing rules for each one.
These rules define how URLs are matched to microfrontend modules during runtime. For every application, a corresponding route is registered in the router.
This setup ensures that when a user navigates to a specific path, the Shell UI Router can correctly identify and trigger loading of the associated module.
Route Structure and Properties
Each application is registered as a route in the Shell UI Router. Every route includes a defined path and a loadChildren method, along with additional properties used during routing.
The path determines how a URL is matched, while loadChildren defines how the corresponding microfrontend module is loaded when the route is activated.
These route definitions allow the Shell UI Router to connect navigation events with the correct module loading behavior, ensuring that the appropriate content is displayed.
Module Loading using Module Federation
When a route is activated, the Shell UI uses the loadChildren method to load the corresponding microfrontend module.
The loadChildren method is responsible for loading the remote module into the Shell UI’s memory using @angular-architects/module-federation. This enables dynamic loading of independently deployed applications at runtime.
Once the remote module is successfully loaded, it is passed to the router, which renders the module’s content in the content area of the application.
Runtime Navigation Flow (Example)
Consider a workspace that includes a User Profile application with the path /user.
When the application starts, the Shell UI registers a route for /user based on the workspace configuration. If the user navigates to a URL starting with /user, the router matches this route.
The loadChildren method is then triggered, and the Shell UI uses Module Federation to load the User Profile microfrontend module.
Once loaded, the router renders the module in the content area, allowing the user to interact with the application.