app1_webpack.config.js

const path = require('path');

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

const { getSharedMappings, getRemote, sharedModules } = require('../../mf.config');

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, '../../tsconfig.base.json'), [...getSharedMappings()]);

const remote = getRemote('app1');

module.exports = {
  output: {
    ...remote.output
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases()
    }
  },
  plugins: [
    new ModuleFederationPlugin({
      name: remote.name,
      filename: remote.entry,
      exposes: remote.exposes,
      shared: {
        ...sharedModules,
        ...sharedMappings.getDescriptors()
      }
    }),
    sharedMappings.getPlugin()
  ]
};

mf.config.js

const mf = require('@angular-architects/module-federation/webpack');

const sharedMappings = [];

const sharedModules = mf.shareAll(
  {
    singleton: true,
    strictVersion: true,
    requiredVersion: 'auto',
    eager: false,
    includeSecondaries: {
      skip: ['@angular/common/http/testing']
    }
  },
  [
    'tslib',
    'zone.js',
    '@angular-architects/module-federation',
    '@angular-architects/module-federation-runtime',
    '@angular/localize'
  ]
);

const shell = {
  name: 'agportal',
  publicPath: ''
};

const remotes = {
  app1: {
    name: 'app1',
    publicPath: 'auto',
    url: '/remotes/app1',
    entry: 'remoteEntry.js',
    exposes: {
      './Module': 'apps/app1/src/app/app1/app1.module.ts'
    }
  },
  app2: {
    name: 'app2',
    publicPath: 'auto',
    url: '/remotes/app2',
    entry: 'remoteEntry.js',
    exposes: {
      './Module': 'apps/app2/src/app/app2/app2.module.ts'
    }
  }
};

const getSharedMappings = () => sharedMappings;
const getRemote = (remote) => remotes[remote];
const getRemotes = () =>
  Object.fromEntries(Object.entries(remotes).map(([key, { name, url, entry }]) => [key, `${name}@${url}/${entry}`]));

module.exports = {
  getSharedMappings,
  sharedModules,
  shell,
  getRemote,
  getRemotes
};

package.json

{
  "name": "@some/app",
  "private": true,
  "description": "Some App",
  "license": "UNLICENSED",
  "scripts": {
    "affected": "nx affected",
    "affected:apps": "nx affected:apps",
    "affected:apps:ci": "yarn affected:apps $(git rev-parse @~) $(git rev-parse @)",
    "affected:build": "nx affected:build --exclude mock-backend",
    "affected:ci": "ts-node -P tasks/tsconfig.json tasks/local-affected-ci.ts",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected:dep-graph:ci": "yarn affected:dep-graph $(git rev-parse @~) $(git rev-parse @)",
    "affected:e2e": "nx affected:e2e",
    "affected:libs": "nx affected:libs",
    "affected:lint": "nx affected:lint",
    "affected:test": "nx affected:test --parallel",
    "build": "nx build",
    "build:dev": "nx build -c=development",
    "compile": "ngcc --properties es2015 browser module main",
    "cypress:install": "cypress install",
    "cypress:e2e:watch:eaf": "nx e2e einzelanmeldung-e2e --watch",
    "cypress:e2e:watch:laf": "nx e2e listenanmeldung-e2e --watch",
    "dep-graph": "nx dep-graph",
    "download-icons": "ts-node --project scripts/tsconfig.json scripts/download-icons.ts",
    "ls-apps": "ts-node --project scripts/tsconfig.json scripts/ls-apps.ts",
    "e2e": "nx e2e",
    "format": "nx format:write",
    "format:check": "nx format:check",
    "format:check:all": "nx format:check --all",
    "format:ci": "yarn format:check --base origin/master --head HEAD --parallel",
    "help": "nx help",
    "postinstall": "node -e \"process.env.NODE_ENV != 'production' && process.exit(1)\" || (node deployment/git-version.js && node ./decorate-angular-cli.js)",
    "lint": "nx lint",
    "lint:fix": "nx lint --fix",
    "ng": "ng",
    "nx": "nx",
    "storybook": "start-storybook -p 6006 -c apps/storybook",
    "storybook:build": "build-storybook -c apps/storybook -o dist/apps/storybook",
    "tdd": "yarn affected:test --only-failed --uncommitted",
    "test": "nx test --code-coverage=true",
    "test:affected": "nx affected:test --base origin/master --head HEAD --code-coverage=true --parallel --maxParallel 6",
    "test:hl": "nx test --code-coverage=true --browsers Chrome_without_security --source-map=false --project",
    "update": "nx migrate latest",
    "workspace-schematic": "nx workspace-schematic"
  },
  "dependencies": {
    "@angular-architects/module-federation": "12.2.0",
    "@angular/animations": "12.2.7",
    "@angular/cdk": "12.2.7",
    "@angular/common": "12.2.7",
    "@angular/compiler": "12.2.7",
    "@angular/core": "12.2.7",
    "@angular/flex-layout": "12.0.0-beta.35",
    "@angular/forms": "12.2.7",
    "@angular/localize": "12.2.7",
    "@angular/material": "12.2.7",
    "@angular/platform-browser": "12.2.7",
    "@angular/platform-browser-dynamic": "12.2.7",
    "@angular/platform-server": "12.2.7",
    "@angular/router": "12.2.7",
    "@angular/service-worker": "12.2.7",
    "@aposin/ng-aquila": "12.1.0",
    "@nestjs/axios": "0.0.3",
    "@nestjs/common": "8.1.1",
    "@nestjs/config": "1.0.2",
    "@nestjs/core": "8.1.1",
    "@nestjs/mapped-types": "1.0.0",
    "@nestjs/ng-universal": "5.0.2",
    "@nestjs/passport": "8.0.1",
    "@nestjs/platform-express": "8.1.1",
    "@nestjs/swagger": "5.1.1",
    "@nestjs/terminus": "8.0.1",
    "@ng-bootstrap/ng-bootstrap": "9.1.3",
    "@ng-web-apis/common": "1.12.0",
    "@ngrx/component": "12.4.0",
    "@ngrx/component-store": "12.4.0",
    "@ngrx/effects": "12.4.0",
    "@ngrx/router-store": "12.4.0",
    "@ngrx/store": "12.4.0",
    "@ngrx/store-devtools": "12.4.0",
    "@nguniversal/common": "12.1.0",
    "@nguniversal/express-engine": "12.1.0",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "@willsoto/nestjs-prometheus": "4.0.0",
    "autobind-decorator": "2.4.0",
    "bootstrap": "4.6.0",
    "cache-manager": "3.4.4",
    "cfenv": "1.2.4",
    "class-transformer": "0.4.0",
    "class-validator": "0.13.1",
    "compression": "1.7.4",
    "cookie-parser": "1.4.5",
    "core-js": "3.17.1",
    "csurf": "1.11.0",
    "decimal.js": "10.3.1",
    "dom4": "2.1.6",
    "dotenv": "10.0.0",
    "flatted": "3.2.2",
    "focus-visible": "5.2.0",
    "font-awesome": "4.7.0",
    "helmet": "4.6.0",
    "http-proxy-middleware": "2.0.1",
    "ibantools": "3.3.1",
    "iframe-resizer": "4.3.2",
    "ioredis": "4.27.9",
    "lodash-es": "4.17.21",
    "lorem-ipsum": "2.0.3",
    "memo-decorator": "2.0.1",
    "moment": "2.29.1",
    "nestjs-pino": "2.2.0",
    "ng2-pdfjs-viewer": "6.0.2",
    "ngx-device-detector": "2.1.1",
    "ngx-dropzone": "3.0.0",
    "ngx-json-viewer": "3.0.2",
    "ngx-mask": "12.0.0",
    "ngx-moment": "5.0.0",
    "ngx-rxjs-zone-scheduler": "12.0.1",
    "node-fetch": "3.1.0",
    "passport": "0.4.1",
    "passport-cookie": "1.0.9",
    "permissions-policy": "0.6.0",
    "pino": "7.0.2",
    "pino-http": "5.8.0",
    "pino-pretty": "7.1.0",
    "prom-client": "13.2.0",
    "rawbody": "1.0.2",
    "reflect-metadata": "0.1.13",
    "report-to": "1.1.0",
    "rxjs": "7.3.0",
    "stacktrace-js": "2.0.2",
    "swagger-ui-express": "4.1.6",
    "ts-cacheable": "1.0.5",
    "tslib": "2.3.1",
    "uuid": "8.3.2",
    "xlsx": "0.17.1",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "12.1.3",
    "@angular-devkit/build-angular": "12.2.7",
    "@angular-eslint/eslint-plugin": "12.3.1",
    "@angular-eslint/eslint-plugin-template": "12.3.1",
    "@angular-eslint/template-parser": "12.3.1",
    "@angular/cli": "12.2.7",
    "@angular/compiler-cli": "12.2.7",
    "@angular/language-service": "12.2.7",
    "@babel/core": "7.15.0",
    "@commitlint/cli": "13.1.0",
    "@commitlint/config-conventional": "13.1.0",
    "@nestjs/schematics": "8.0.4",
    "@nestjs/serve-static": "2.2.2",
    "@nestjs/testing": "8.1.1",
    "@ngneat/spectator": "8.0.4",
    "@ngrx/schematics": "12.4.0",
    "@nguniversal/builders": "12.1.1",
    "@nrwl/angular": "12.9.0",
    "@nrwl/cli": "12.9.0",
    "@nrwl/cypress": "12.9.0",
    "@nrwl/eslint-plugin-nx": "12.9.0",
    "@nrwl/jest": "12.9.0",
    "@nrwl/nest": "12.9.0",
    "@nrwl/node": "12.9.0",
    "@nrwl/schematics": "8.12.11",
    "@nrwl/workspace": "12.9.0",
    "@storybook/addon-actions": "6.3.7",
    "@storybook/addon-controls": "6.3.7",
    "@storybook/addon-essentials": "6.3.7",
    "@storybook/addon-links": "6.3.7",
    "@storybook/angular": "6.3.7",
    "@storybook/builder-webpack5": "6.3.7",
    "@storybook/manager-webpack5": "6.3.7",
    "@storybook/theming": "6.3.7",
    "@types/cfenv": "1.2.1",
    "@types/compression": "1.7.1",
    "@types/cookie-parser": "1.4.2",
    "@types/csurf": "1.11.2",
    "@types/faker": "5.5.8",
    "@types/helmet": "4.0.0",
    "@types/iframe-resizer": "3.5.9",
    "@types/ioredis": "4.27.2",
    "@types/jest": "27.0.1",
    "@types/lodash-es": "4.17.4",
    "@types/node": "16.7.10",
    "@types/rimraf": "3.0.2",
    "@types/stacktrace-js": "2.0.3",
    "@types/supertest": "2.0.11",
    "@types/uuid": "8.3.1",
    "@types/yargs": "16.0.4",
    "@typescript-eslint/eslint-plugin": "4.30.0",
    "@typescript-eslint/parser": "4.30.0",
    "babel-loader": "8.2.2",
    "chalk": "5.0.0",
    "cypress": "8.3.1",
    "cypress-file-upload": "5.0.8",
    "cypress-plugin-tab": "1.0.5",
    "cypress-real-events": "1.5.1",
    "eslint": "7.32.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-cypress": "2.11.3",
    "eslint-plugin-import": "2.24.2",
    "eslint-plugin-jsdoc": "36.0.8",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "eslint-plugin-react": "7.25.1",
    "faker": "5.5.3",
    "git-rev": "0.2.1",
    "husky": "7.0.2",
    "jest": "27.1.0",
    "jest-date-mock": "1.0.8",
    "jest-preset-angular": "9.0.7",
    "ng-mocks": "12.4.0",
    "nock": "13.1.3",
    "npm-run-all": "4.1.5",
    "pm2": "5.1.2",
    "prettier": "2.3.2",
    "pretty-quick": "3.1.1",
    "redis-memory-server": "0.5.0",
    "rimraf": "3.0.2",
    "rxjs-marbles": "7.0.1",
    "supertest": "6.1.6",
    "tasksfile": "5.1.1",
    "ts-jest": "27.0.5",
    "ts-node": "10.2.1",
    "type-fest": "2.1.0",
    "typemoq": "2.1.0",
    "typescript": "4.3.5",
    "yargs": "15.0.2",
    "zx": "1.14.2"
  },
  "resolutions": {
    "dicer": ">= 0.3.0",
    "trim": ">= 0.0.3",
    "lodash": ">= 4.17.21",
    "glob-parent": ">= 5.1.2",
    "nth-check": ">= 2.0.1",
    "prismjs": ">= 1.25.0",
    "browserslist": ">= 4.16.5",
    "validator": ">= 13.7.0",
    "tmpl": ">= 1.0.5"
  },
  "engines": {
    "node": ">= 14.17.0 <15.0.0",
    "npm": ">= 6.9.0"
  },
  "redisMemoryServer": {
    "disablePostinstall": "1",
    "debug": "1"
  }
}

remotes.ts

export const REMOTES = {
  app1: {
    remoteName: 'app1',
    remoteEntry: '/remotes/app1/remoteEntry.js',
    exposedModule: './Module'
  },
  app2: {
    remoteName: 'app2',
    remoteEntry: '/remotes/app2/remoteEntry.js',
    exposedModule: './Module'
  }
};

tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "esModuleInterop": true,
    "importHelpers": true,
    "module": "es2020",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2019", "dom"],
    "baseUrl": ".",
    "paths": {}
  },
  "exclude": ["node_modules", "tmp"]
}