Module Federation Introduction

Module Federation is a mechanism that allows code and resources to be shared across multiple JavaScript applications.

Module Federation is used to support a microfrontend-based architecture where multiple applications can work together as a single user interface.

In OneCX, Module Federation enables dynamic loading of UI modules, allowing applications to be developed, built, and deployed independently.

This documentation section covers module federation-related concepts, implementation details, configuration, and best practices.

Before proceeding, familiarize yourself with the following concepts:

Table 1. Prerequisites
Name	Description
Webpack	A static module bundler for JavaScript applications that supports Module Federation
Module Federation	Enables scalable, independently deployable frontend architecture with runtime integration
Web Components	Technology used to render applications in OneCX shell
Microfrontends	Extends the concepts of microservices to the frontend world
OneCX	An innovative open-source platform solution enabling seamless microfrontend integration

Table 2. Concepts
Name	Description
Microfrontend content loading	Explains how content loading is handled in OneCX
Web Components	Explains how Web Components are used in OneCX to load Microfrontends

Table 3. Microfrontends in OneCX
Name	Description
Bootstrapping	Explains how to set the initial structure and configuration for a Microfrontend application in OneCX
Configuration	Explains how to configure a Microfrontend to use Module Federation for loading and dependency sharing in OneCX
@onecx/angular-webcomponents	Explains that exposing modules and remote components via Microfrontends is the recommended approach within the OneCX platform.