This project shows an example of using Webpack 5 Module Federation with Angular 13.0.2 using shared module and NGXS state management.

• note the use of yarn, this is required to override the webpack version for the angular cli

• the project was developed based on the the example angular11-microfrontends

• shared library will maintain the application state.

• shell (host) and profile (remote) can access the store, dispatch actions etc.

  • the profile:
    • has a form to create an user, the user info is added stored in the application state (store) which is in the share module mdmf-shared
    • show the list of users by selecting them from the common store
  • the shell:
    • show the list of users by selecting them from the common store
  • when an user is added to the store, both shell and profile can see the changes.

• Install packages: yarn install
• Build the shared library yarn build:shared
• Start the mdmf-shell: yarn start:shell
• Start the Microfrontend: yarn start:profile
• Open the shell http:https://localhost:4200
• Click the profile navigation link to load the remote Microfrontend

The shell project located in: projects/mdmf-shell folder, its contains the shell application which is used to load remote Microfrontends using dynamic routing constructed from the Microfrontend array. The list of Microfrontends can be loaded from a config if required, but for the example it is just an hardcoded array.

The share libraries and Angular library (mdmf-shared) are configured within the Module Federation config:

  plugins: [
    new ModuleFederationPlugin({
      shared: {
        "@angular/core": { eager: true, singleton: true },
        "@angular/common": { eager: true, singleton: true },
        "@angular/router": { eager: true, singleton: true },
        "@ngxs/store": {singleton: true, eager: true },
        "mdmf-shared": { singleton: true, eager: true },
      },
    }),
  ],

The shared module (MdmfSharedModule) in the mdmf-shared should be imported as normal in the @NgModule

The profile project located in: projects/mdmf-profile contains a profile module with some child routes configured. The profile module is exposed as a remote module within the Module Federation config:

plugins: [
  new ModuleFederationPlugin({
    name: 'profile',
    library: { type: 'var', name: 'profile' },
    filename: 'remoteEntry.js',
    exposes: {
      ProfileModule: './projects/mdmf-profile/src/app/profile/profile.module.ts',
    },
    shared: {
      '@angular/core': { singleton: true, eager: true },
      '@angular/common': { singleton: true, eager: true },
      '@angular/router': { singleton: true, eager: true },
      '@ngxs/store': { singleton: true, eager: true },
      'mdmf-shared': { singleton: true, eager: true },
    },
  }),
];

• the shared library is a typical Angular library created by ng generate library mdmf-shared

• it uses state management library ngxs

  • the dependencies installation

    yarn add @ngxs/store
    ## for loggin and browswer devtools
    yarn add --dev @ngxs/logger-plugin @ngxs/devtools-plugin

  • need to build the library first before running shell and profile projects

    ng build mdmf-shared

• it contains the actions, application state and common models