Micro前端配置-NX NRWL MonorePo

Question

配置堆栈：Angular 13，模块联合会，NX Monorepo，NGX-Build-Plus 根据：Manfred Steyer错误的Angular Enterprise Book

错误：

ChunkLoadError: Loading chunk default-node_modules_rxjs__esm2015_internal_Observable_js failed.
(error: http://localhost:4207/default-node_modules_rxjs__esm2015_internal_Observable_js.js)
    at Object.__webpack_require__.f.j (jsonp chunk loading:27:1)
    at ensure chunk:6:1
    at Array.reduce (<anonymous>)
    at Function.__webpack_require__.e (ensure chunk:5:1)
    at Object../web-components (container-entry:3:1)
    at Module.get (container-entry:10:1)
    at angular-architects-module-federation-runtime.js:9:1
    at Generator.next (<anonymous>)
    at tslib.es6.js:76:1
    at new ZoneAwarePromise (zone.js:1387:1)

我想我已经尝试了一切。我每次都会遇到相同的错误。

package.json

"dependencies": {
    "@angular-architects/module-federation": "^14.0.1",
    "@angular/animations": "13.1.2",
    "@angular/cdk": "13.1.2",
    "@angular/common": "13.1.2",
    "@angular/compiler": "13.1.2",
    "@angular/core": "13.1.2",
    "@angular/elements": "13.1.2",
    "@angular/forms": "13.1.2",
    "@angular/localize": "13.1.2",
    "@angular/platform-browser": "13.1.2",
    "@angular/platform-browser-dynamic": "13.1.2",
    "@angular/router": "13.1.2",
    "@nebular/bootstrap": "^9.0.0",
    "@nebular/eva-icons": "^9.0.0",
    "@nebular/theme": "^9.0.0",
    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
    "@ngrx/component-store": "13.0.2",
    "@ngrx/effects": "13.0.2",
    "@ngrx/entity": "13.0.2",
    "@ngrx/router-store": "13.0.2",
    "@ngrx/store": "13.0.2",
    "bootstrap": "^5.1.3",
    "css-grid": "^1.0.7",
    "eva-icons": "^1.1.2",
    "file-saver": "^2.0.5",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
    "ngx-build-plus": "^13.0.1",
    "ngx-spinner": "^12.0.0",
    "roboto-fontface": "^0.10.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "xlsx": "^0.18.3",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.1.3",
    "@angular-eslint/eslint-plugin": "13.0.1",
    "@angular-eslint/eslint-plugin-template": "13.0.1",
    "@angular-eslint/template-parser": "13.0.1",
    "@angular/cli": "13.1.3",
    "@angular/compiler-cli": "13.1.2",
    "@angular/language-service": "13.1.2",
    "@ngrx/schematics": "13.0.2",
    "@ngrx/store-devtools": "13.0.2",
    "@nrwl/angular": "13.4.4",
    "@nrwl/cli": "13.4.4",
    "@nrwl/cypress": "13.4.4",
    "@nrwl/eslint-plugin-nx": "13.4.4",
    "@nrwl/jest": "13.4.4",
    "@nrwl/linter": "13.4.4",
    "@nrwl/tao": "13.4.4",
    "@nrwl/workspace": "13.4.4",
    "@schematics/angular": "^12.2.11",
    "@types/jest": "27.0.2",
    "@types/js-cookie": "^3.0.1",
    "@types/lodash": "^4.14.178",
    "@types/node": "14.14.33",
    "@typescript-eslint/eslint-plugin": "5.3.1",
    "@typescript-eslint/parser": "5.3.1",
    "cypress": "^8.3.0",
    "eslint": "8.2.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jasmine-marbles": "~0.8.3",
    "jest": "27.2.3",
    "jest-preset-angular": "11.0.0",
    "prettier": "^2.3.1",
    "ts-jest": "27.0.5",
    "typescript": "4.5.4",
    "webpack": "^5.64.1"
  }

webpack.config subproject（不是shell）：

module.exports = {
  experiments: {
    outputModule: true,
  },
  output: {
    uniqueName: 'sub-project',
    publicPath: 'auto',
    scriptType: 'text/javascript'
  },
  optimization: {
    runtimeChunk: false,
    minimize: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      library: {
        type: 'module',
      },
      name: "sub-project",
      filename: "remoteEntry.js",
      exposes: {
        './web-components': './apps/sub-project/src/bootstrap.ts', // bootstrap --> main --> AppModule --> WebComp
      },
      remotes: {},
      shared: {
        '@angular/core': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '13.1.2',
        },
        '@angular/common': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '13.1.2',
        },
        '@angular/common/http': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '13.1.2',
        },
        '@angular/router': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '13.1.2',
        },
        ...sharedMappings.getDescriptors(),
      },
    }),
    sharedMappings.getPlugin(),
  ],
main.ts
import('./bootstrap').catch((err) => console.error(err));

bootstrap.ts

if (environment.production) {
  enableProdMode();
}

declare const require: any;
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ngVersion = require('../../../package.json').dependencies['@angular/core'];
(window as any).plattform = (window as any).plattform || {};
let platform = (window as any).plattform[ngVersion];
if (!platform) {
  platform = platformBrowserDynamic();
  (window as any).plattform[ngVersion] = platform; 
}
platform.bootstrapModule(AppModule)
  .catch((err: any) => console.error(err));

project.json（aka angular.json）

{
  "projectType": "application",
  "root": "apps/sub-project",
  "sourceRoot": "apps/sub-project/src",
  "prefix": "frontend",
  "targets": {
    "build": {
      "builder": "ngx-build-plus:browser",
      "outputs": [
        "{options.outputPath}"
      ],
      "options": {
        "outputPath": "dist/apps/sub-project",
        "index": "apps/sub-project/src/index.html",
        "main": "apps/sub-project/src/main.ts",
        "polyfills": "apps/sub-project/src/polyfills.ts",
        "tsConfig": "apps/sub-project/tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "apps/sub-project/src/favicon.ico",
          "apps/sub-project/src/assets"
        ],
        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
          "node_modules/@nebular/theme/styles/prebuilt/default.css",
          "apps/sub-project/src/styles/styles.scss",
          "libs/shared/styles/styles.scss"
        ],
        "scripts": [],
        "extraWebpackConfig": "apps/sub-project/webpack.config.js"
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "4kb",
              "maximumError": "10kb"
            }
          ],
          "fileReplacements": [
            {
              "replace": "apps/sub-project/src/environments/environment.ts",
              "with": "apps/sub-project/src/environments/environment.prod.ts"
            }
          ],
          "outputHashing": "all",
            "extraWebpackConfig": "apps/sub-project/webpack.prod.config.js"
        },
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "builder": "ngx-build-plus:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "sub-project:build:production",
          "extraWebpackConfig": "apps/sub-project/webpack.prod.config.js"
        },
        "development": {
          "browserTarget": "sub-project:build:development",
          "extraWebpackConfig": "apps/sub-project/webpack.config.js"
        }
      },
      "defaultConfiguration": "development",
      "options": {
        "port": 4203,
        "extraWebpackConfig": "apps/sub-project/webpack.config.js",
        "publicHost": "http://localhost:4203"
      }
    },
    "extract-i18n": {
      "executor": "ngx-build-plus:extract-i18n",
      "options": {
        "browserTarget": "sub-project:build"
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "options": {
        "lintFilePatterns": [
          "apps/sub-project/src/**/*.ts",
          "apps/sub-project/src/**/*.html"
        ]
      }
    },
    "test": {
      "executor": "ngx-build-plus:karma",
      "outputs": [
        "coverage/apps/sub-project"
      ],
      "options": {
        "jestConfig": "apps/sub-project/jest.config.js",
        "passWithNoTests": true
      }
    },
    "serve-mfe": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "commands": [
          "nx serve sub-project"
        ]
      }
    }
  },
  "tags": []
}