feat(angular): add opinionated mfe webpack helpers

[Coly010]

Context

Currently, when generating Angular MFE Webpack Configurations we rely on @angular-architects/module-federation. However, what we use from this package does not involve Angular specifically.

It is also not built to think exclusively about Nx Monorepos. In this regard, it is possible to improve DX for Nx Workspaces using MFEs.

It also offers a lot of flexibility, which may be useful for some use cases, however, it would be preferable to retain some additional control.

Added Behaviour

This PR adds two helper functions to replace what we require from @angular-architects/module-federation.

The aims with these helpers are:

• Reduce cognitive load for average developer
• Improve DX for developers
• Simplify the resulting Webpack Configuration
• Retain control over "Single Version Policy"

Results

A current Webpack host config that is generated including a single shared workspace library:

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, ['@mfe/shared-lib'], workspaceRootPath);

module.exports = {
  output: {
    uniqueName: 'host2',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
  },
  experiments: {
    outputModule: true,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {},
      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(),
  ],
};

A Webpack config for a host using our new helpers:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const {
  shareWorkspaceLibraries,
  sharePackages,
} = require('@nrwl/angular/mfe-utils');

const sharedLibraries = shareWorkspaceLibraries(['@mfe/shared-lib']);

module.exports = {
  output: {
    uniqueName: 'host2',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
  },
  experiments: {
    outputModule: true,
  },
  resolve: {
    alias: {
      ...sharedLibraries.getAliases(),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {},
      shared: {
        ...sharePackages([
          '@angular/core',
          '@angular/common',
          '@angular/common/http',
          '@angular/router',
          'rxjs',
        ]),
        ...sharedLibraries.getLibraries(),
      },
      library: {
        type: 'module',
      },
    }),
    sharedLibraries.getReplacementPlugin(),
  ],
};

[nx-cloud]

☁️ Nx Cloud Report

CI ran the following commands for commit 82b3017. 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=261b35d90bd0c1d68ffe506c17356668ed123784 --head=82b30172c9b4784dd1ee58589868cf941ac88b7f --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=261b35d90bd0c1d68ffe506c17356668ed123784 --head=82b30172c9b4784dd1ee58589868cf941ac88b7f --parallel=1
• nx affected --target=build --base=261b35d90bd0c1d68ffe506c17356668ed123784 --head=82b30172c9b4784dd1ee58589868cf941ac88b7f --parallel=3
• nx affected --target=lint --base=261b35d90bd0c1d68ffe506c17356668ed123784 --head=82b30172c9b4784dd1ee58589868cf941ac88b7f --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/A4K5VxGrkCBxEw5omJjqHD5h4h3d
✅ Preview: Canceled

[Deployment for 82b3017 canceled]

[ashwinGokhale]

This is great! It doesn't seem like there's anything Angular specific about this, so does it need to be in @nrwl/angular? I would love to use this in React apps as well.

[Coly010]

@ashwinGokhale It's all on the roadmap 🙂

[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.