Expose Microfrontend’s Content as Web Components

OneCX platform offers different ways of exposing Microfrontend’s content. One of them is Webcomponent method.

When exposing content with Webcomponent method, it is required to ensure the correct setup. For exposing Angular content, there are functionalities provided via the @onecx/angular-webcomponents library. For a detailed guide on how to expose Microfrontend’s content via Webcomponent method, please refer here.

Using @onecx/angular-webcomponents library, according to the guide, is the recommended way of exposing Angular content. The set of functionalities provided via the library is taking care of all requirements related to the Web Components adaptation. Apart from automatic registration to the Custom Elements Registry, they ensure that the following issues are covered:

  • Every module and Remote Component is going to have its own router. Routers (Shell’s router, displayed module’s router, and router of each displayed Remote Component) need to be synchronized so each can react to the router events.

  • A Single Angular version can only create one platform to operate on, which means that for every content loaded within a page, the same platform has to be used for a specific version.

  • ngZone of Shell UI has to be shared with all modules and Remote Components to allow Web Components to function correctly.

In-depth explanations for those issues can be found in the Module Federation multi-framework and version micro frontends document.