feat(angular): add withModuleFederation helper

[Coly010]

Current Behavior

We have a large webpack config file that gets generated for host and remote MFE apps. It provides too much flexibility and it can be complex for the average developer to configure correctly.

Expected Behavior

Create a helper function that will

• generate a webpack config, but with a lot more constraints in place.
• automatically find and share project dependencies to enforce a single version policy
• provide options for configuring host's remotes and their location
• provide option for remotes to specify what they expose
• provide option to override or remove libraries and packages from being shared

For Remotes: this allows us to go from:

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

/**
 * We use the NX_TSCONFIG_PATH environment variable when using the @nrwl/angular:webpack-browser
 * builder as it will generate a temporary tsconfig file which contains any required remappings of
 * shared libraries.
 * A remapping will occur when a library is buildable, as webpack needs to know the location of the
 * built files for the buildable library.
 * This NX_TSCONFIG_PATH environment variable is set by the @nrwl/angular:webpack-browser and it contains
 * the location of the generated temporary tsconfig file.
 */
const tsConfigPath =
  process.env.NX_TSCONFIG_PATH ??
  path.join(__dirname, '../../tsconfig.base.json');

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

module.exports = {
  output: {
    uniqueName: 'todo',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
  },
  experiments: {
    outputModule: true,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'todo',
      filename: 'remoteEntry.js',
      exposes: {
        './Module': 'apps/todo/src/app/remote-entry/entry.module.ts',
      },
      shared: share({
        '@angular/core': {
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true,
        },
        '@angular/common': {
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true,
        },
        '@angular/common/http': {
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true,
        },
        '@angular/router': {
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true,
        },
        rxjs: {
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true,
        },
        ...sharedMappings.getDescriptors(),
      }),
      library: {
        type: 'module',
      },
    }),
    sharedMappings.getPlugin(),
  ],
};

to

const { withModuleFederation } = require('@nrwl/angular/module-federation');
module.exports = withModuleFederation({
  name: 'todo',
  exposes: {
    './Module': 'apps/todo/src/app/remote-entry/entry.module.ts',
  },
});

and for hosts, from:

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

/**
 * We use the NX_TSCONFIG_PATH environment variable when using the @nrwl/angular:webpack-browser
 * builder as it will generate a temporary tsconfig file which contains any required remappings of
 * shared libraries.
 * A remapping will occur when a library is buildable, as webpack needs to know the location of the
 * built files for the buildable library.
 * This NX_TSCONFIG_PATH environment variable is set by the @nrwl/angular:webpack-browser and it contains
 * the location of the generated temporary tsconfig file.
 */
const tsConfigPath =
  process.env.NX_TSCONFIG_PATH ??
  path.join(__dirname, '../../tsconfig.base.json');

const workspaceRootPath = path.join(__dirname, '../../');
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  tsConfigPath,
  [
    /* mapped paths to share */
    '@mfe-netlify/shared/auth',
  ],
  workspaceRootPath
);

module.exports = {
  output: {
    uniqueName: 'dashboard',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
  },
  experiments: {
    outputModule: true,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        todo: 'https://todo-mfe-video.netlify.app/remoteEntry.js',
        login: 'https://login-mfe-video.netlify.app/remoteEntry.js',
      },
      shared: share({
        '@angular/core': {
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true,
        },
        '@angular/common': {
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true,
        },
        '@angular/common/http': {
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true,
        },
        '@angular/router': {
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true,
        },
        rxjs: {
          singleton: true,
          strictVersion: true,
          requiredVersion: 'auto',
          includeSecondaries: true,
        },
        ...sharedMappings.getDescriptors(),
      }),
      library: {
        type: 'module',
      },
    }),
    sharedMappings.getPlugin(),
  ],
};

to

const { withModuleFederation } = require('@nrwl/angular/module-federation');
module.exports = withModuleFederation({
  name: 'dashboard',
  remotes: ['todo', 'login'],
});

[nx-cloud]

☁️ Nx Cloud Report

CI ran the following commands for commit 71138b3. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 8 targets

• nx affected --target=e2e --base=0f7cf3464e9dbf7d56fa4045d706267f1ce706a1 --head=71138b3ebe0c807e23491a485b1b8adbfcaa8d35 --exclude=e2e-storybook,e2e-react-native,e2e-detox --parallel=1
• nx run-many --target=build --all --parallel=8 --exclude=docs,nx-dev-data-access-documents,nx-dev-e2e,nx-dev,nx-dev-feature-analytics,nx-dev-feature-conf,nx-dev-feature-doc-viewer,nx-dev-feature-search,nx-dev-feature-storage,nx-dev-feature-versions-and-flavors,nx-dev-ui-commands,nx-dev-ui-common,nx-dev-ui-home,nx-dev-ui-member-card,nx-dev-ui-sponsor...
• nx run-many --target=build --all --parallel=8 --exclude=docs,nx-dev-data-access-documents,nx-dev-e2e,nx-dev,nx-dev-feature-analytics,nx-dev-feature-conf,nx-dev-feature-doc-viewer,nx-dev-feature-search,nx-dev-feature-storage,nx-dev-feature-versions-and-flavors,nx-dev-ui-commands,nx-dev-ui-common,nx-dev-ui-home,nx-dev-ui-member-card,nx-dev-ui-sponsor...
• nx run-many --target=build --all --parallel=8 --exclude=docs,nx-dev-data-access-documents,nx-dev-e2e,nx-dev,nx-dev-feature-analytics,nx-dev-feature-conf,nx-dev-feature-doc-viewer,nx-dev-feature-search,nx-dev-feature-storage,nx-dev-feature-versions-and-flavors,nx-dev-ui-commands,nx-dev-ui-common,nx-dev-ui-home,nx-dev-ui-member-card,nx-dev-ui-sponsor...
• nx affected --target=test --base=0f7cf3464e9dbf7d56fa4045d706267f1ce706a1 --head=71138b3ebe0c807e23491a485b1b8adbfcaa8d35 --parallel=1
• nx affected --target=build --base=0f7cf3464e9dbf7d56fa4045d706267f1ce706a1 --head=71138b3ebe0c807e23491a485b1b8adbfcaa8d35 --parallel=3
• nx affected --target=lint --base=0f7cf3464e9dbf7d56fa4045d706267f1ce706a1 --head=71138b3ebe0c807e23491a485b1b8adbfcaa8d35 --parallel=3
• nx build typedoc-theme

---

Sent with 💌 from NxCloud.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nrwl/nx-dev/7riLHv9pfGD1TqMzCSoDmZ5p9yBB
✅ Preview: Canceled

[Deployment for 71138b3 canceled]

[leosvelperez]

LGTM! 🎉

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.