0

I have a shared library in my monorepo with multiple angular application. Do i need to share the peer dependency packages using the share function of @angular-architects/module-federation/webpack.

I want single instance of those packages to be present in host application.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Jagadesan
  • 1
  • 1

1 Answers1

2

When using Module Federation, peer dependencies are defined in the remote application's package.json file, and must match the version of the shared dependency that is being used in the host application.

For example, if the host application is using Angular version 12, and the remote application is using a shared library that has a peer dependency of Angular version 11, this would cause a version conflict and result in an error. Therefore, it's important to ensure that the shared dependencies used in both the host and remote applications have matching peer dependencies.

In addition, when using Module Federation in Angular, it's recommended to use the "shared" option in the webpack configuration to specify the modules that can be shared between the applications. This allows for better control and flexibility over which dependencies are being shared and how they are being used.

// webpack.config.js in the host application

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other configuration options
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remote1: 'remote1@http://localhost:3000/remoteEntry.js',
      },
      shared: {
        // Define shared modules and versions
        '@angular/core': { singleton: true, strictVersion: true },
        '@angular/common': { singleton: true, strictVersion: true },
        '@angular/router': { singleton: true, strictVersion: true },
      },
    }),
  ],
};
Zsolt Balint
  • 767
  • 1
  • 6