webpack.config.js

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const mf = require('@angular-architects/module-federation/webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, 'tsconfig.json'), [
  /* mapped paths to share */
]);

module.exports = {
  context: path.resolve(__dirname), // Sets the context to the directory where webpack.config.js is
  output: {
    uniqueName: "LibKey",
    publicPath: 'auto',
  },
  optimization: {
    minimize: true,
    runtimeChunk: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  experiments: {
    outputModule: true,
  },
  module: {
    rules: [
      // ... other rules ...
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/assets',
          to: 'assets',
          noErrorOnMissing: true,
          globOptions: {
            ignore: [
              '**/.gitkeep', // Make sure this matches exactly the files you want to exclude
              '**/.*', // This pattern excludes all hidden files
            ],
          },
        }, // Adjust the paths as needed
      ],
    }),
    // Ensure a Node-like `global` identifier exists in ESM bundles (Module Federation).
    // This prevents runtime errors like `ReferenceError: global is not defined` in host apps.
    new webpack.ProvidePlugin({
      global: [path.resolve(__dirname, 'src/global-shim.ts'), 'default'],
    }),
    // DISABLE ngDevMode as it is not needed in a remoteEntry work around for issue: https://github.com/angular-architects/module-federation-plugin/issues/458
    // new webpack.DefinePlugin({
    //   ngDevMode: "undefined",
    // }),
    // END DISABLE ngDevMode as it is not needed in a remoteEntry
    new ModuleFederationPlugin({
      library: { type: 'module' },

      // For remotes (please adjust)
      name: "LibKey",
      filename: 'remoteEntry.js',
      exposes: {
        './LibKey': './src/bootstrapLibKey.ts',
      },

      // For hosts (please adjust)
      // remotes: {
      //     "mfe1": "http://localhost:3000/remoteEntry.js",

      // },

      shared: share({
        '@angular/core': { requiredVersion: 'auto' },
        '@angular/common': { requiredVersion: 'auto' },
        '@angular/router': { requiredVersion: 'auto' },
        rxjs: { requiredVersion: 'auto' },
        '@angular/common/http': { requiredVersion: 'auto' },
        '@angular/platform-browser': { requiredVersion: 'auto' },
        '@ngx-translate/core': { singleton: true },
        '@ngrx/store': { singleton: true },
        ...sharedMappings.getDescriptors(),
      }),
    }),
    sharedMappings.getPlugin(),
  ],
};