OneCX Adaptation to Webcomponent Method

As stated in Microfrontend content loading documentation, every method of Microfrontend’s content exposal has an impact on the OneCX platform behavior for both module and Remote Component loading. The adaptations made by OneCX to work with Web Components were briefly mentioned in the Web Components preview, however depending on the content type, the behavior varies.

Module Loading Behavior

Overview

This section explains how the Shell UI loads and renders Microfrontend modules using the Webcomponent expose method. It describes how routing, module federation, and Web Components work together, where the Shell loads the module and Web Components handle rendering through custom elements.

  • Shell UI Responsibility - The Shell UI App is responsible for displaying Microfrontend’s module when router navigation is matched for a desired Microfrontend.

  • Webcomponent Adaptation in loadChildren - With Webcomponent method, Shell UI will adapt the loadChildren method to:

    1. load desired remote module using @angular-architects/module-federation (no change).

    2. use WebComponentLoaderModule as the module to be lazy-loaded (instead of the Microfrontend’s module).

  • loadChildren Behavior - The loadChildren method bound to a Route is an asynchronous method that in the end should return a module to be displayed when activating a certain Route.

  • Module Loading with Webcomponent - With Webcomponent method, the desired Microfrontend’s module is still being loaded using @angular-architects/module-federation.

  • Custom Elements Registration - During that loading, it should register a component in the Custom Elements Registry, as mentioned in the previous section.

  • Shell UI Rendering Responsibility - For OneCX platform, it means that it no longer should load the Microfrontend’s module directly but ensure that the HTML code has the correct Custom Element in order to display the module.

  • WebComponentLoaderModule - WebComponentLoaderModule is a simple Angular module with a Router set up to always display WebComponentLoaderComponent.

  • WebComponentLoaderComponent Responsibility - This component is responsible for rendering the HTML element required to display the module with Web Components Custom Elements.

  • Router Navigation Handling - Whenever Shell UI’s router detects a change of the Microfrontend (another path is matched than the current one), it calls loadChildren method to load the desired module and returns WebComponentLoaderModule.

  • Component Initialization - The module then creates and initializes WebComponentLoaderComponent, which, after initializations, creates the HTML element.

  • Web Components Binding - Then Web Components using Custom Elements technology bounds the Microfrontend’s module to the created element.

  • Reference - For a detailed guide on how to expose Microfrontend’s module via Webcomponent method, please refer here.

Remote Component Behavior

Overview

This section explains how the Slot Component renders Microfrontend Remote Components using the Webcomponent method. Instead of directly creating Angular components, the Slot Component creates an HTML host element, while the microfrontend registers and binds its component using Web Components and Custom Elements.

  • Slot Component Responsibility Slot Component is responsible for displaying Microfrontend’s Remote Components during Slot Component initialization.

  • Webcomponent Adaptation in Slot Component - With the Webcomponent method, the Slot Component will adapt the steps to:

    1. load desired remote content using @angular-architects/module-federation (no change).

    2. create HTML element directly inside a container (instead of creating Microfrontend’s Remote Component instance).

  • Dynamic Content Creation The Slot Component content is based on Angular ViewContainerRef to dynamically create content inside the Slot Component.

  • Module Loading with Webcomponent - With Webcomponent method, the desired Microfrontend’s Remote Component is still being loaded using @angular-architects/module-federation.

  • Custom Elements Registration - During that loading, it should register a component in the Custom Elements Registry, as mentioned in the previous section.

  • OneCX Rendering Responsibility - For OneCX platform, it means that it no longer should create the Microfrontend’s component directly but ensure that the HTML code has the correct element in order to display the component.

  • Webcomponent Method Difference - The difference with the Webcomponent method is that, from the OneCX platform’s perspective, no component needs to be created. Instead, a "host" element must be created to allow Web Components' Custom Elements to display desired content.

  • Reference - For a detailed guide on how to expose Microfrontend’s Remote Components via Webcomponent method, please refer here.