Configure Microfrontend to use Module Federation

This guide uses webpack for the examples, but you can use any other tool that supports Module Federation.

Following are the checkpoints to set up a microfrontend with Module Federation:

Exposed content

Each Microfrontend can expose multiple modules and Remote Components. Every separate module and Remote Component needs to be defined as a separate, unique entry representing a remote module. Each entry is a Key-Value Pair:

  • Key - Name of the exposed module.

  • Value - File to be used for module bootstrap.

As we use webpack for Module Federation configuration, the following changes are made in the webpack.config.js file of the microfrontend:

Example - Expose Module or Remote Component
const { withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack')
const config = withModuleFederationPlugin({
  // other configuration
  exposes: {
    './ExampleModule': './src/main.ts',
    './ExampleComponent': './src/remotes/example/example.component.main.ts'
  }
  // other configuration
})

Shared dependencies

In OneCX, we recommend sharing all dependencies to take full advantage of Module Federation capabilities.

  • share all @onecx packages

  • share rxjs

For Angular Applications:

  • share all @angular packages (make sure to not share as singleton)

  • share primeng

  • share @ngx-translate/core

Example - Share relevant dependencies 
const { withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack')
const config = withModuleFederationPlugin({
  // other configuration
  shared: share({
    /*All Angular packages */
    '@angular/core': { requiredVersion: 'auto', includeSecondaries: true },
    '@angular/forms': { requiredVersion: 'auto', includeSecondaries: true },
    '@angular/common': { requiredVersion: 'auto', includeSecondaries: { skip: ['@angular/common/http/testing'] } },
    '@angular/common/http': { requiredVersion: 'auto', includeSecondaries: true },
    '@angular/platform-browser': { requiredVersion: 'auto', includeSecondaries: true },
    '@angular/router': { requiredVersion: 'auto', includeSecondaries: true },

    /*All @OneCX, primeNg, rxjs and translation packages */
    '@ngx-translate/core': { requiredVersion: 'auto' },
    primeng: { requiredVersion: 'auto', includeSecondaries: true },
    rxjs: { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/accelerator': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/angular-accelerator': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/angular-auth': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/angular-integration-interface': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/angular-remote-components': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/angular-testing': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/angular-webcomponents': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/integration-interface': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/keycloak-auth': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/ngrx-accelerator': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/portal-integration-angular': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/portal-layout-styles': { requiredVersion: 'auto', includeSecondaries: true }
  }),
  // other configuration
})

Shared Mapping Property

The shared mapping should be empty.

Example - Empty Shared Mapping
const { withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack')
const config = withModuleFederationPlugin({
  // other configuration
  sharedMappings: []
  // other configuration
})

Remote entry file name and Remote name

  • Remote File - The name of the remote entry file (usually remoteEntry.js)

  • Remote Name - The unique name of the Microfrontend

Example - Remote file and name
const { withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack')
const config = withModuleFederationPlugin({
  // other configuration
  name: 'example-ui',
  filename: 'remoteEntry.js',
  // other configuration
})
Table 1. Navigation

← Back to Module federation bootstrapping and configuration in OneCX