Общие службы федерации модуля

Я работаю над новым проектом с использованием Angular 11 и Webpack 5. Я основываю свою работу на Manfred Steyer's Репозиторий" Module Federation Plugin Example ", в котором используется Angular CLI. Я не могу понять, как разделить одноэлементную службу из общей локальной библиотеки Angular между двумя моими приложениями.

Я сделаю все, что в моих силах, чтобы объяснить свою настройку .. Очень сожалею о том, как долго это будет длиться.

Упрощенная файловая структура

root
  package.json
  projects/
    shell/
      src/app/
        app.module.ts
        app.component.ts
      webpack.config.ts <-- partial config
    mfe1/
      src/app/
        app.module.ts
        app.component.ts
      webpack.config.ts <-- partial config
    shared/
      src/lib/
        global.service.ts
      package.json <-- package.json for lib

Угловой

оба файла app.component.ts идентичны

import {GlobalService} from 'shared';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(shared: SharedService) {}
}

global.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GlobalService {

  constructor() {
    console.log('constructed SharedService');
  }
}

Webpack

shell / webpack.config.ts

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:5000/",
    uniqueName: "shell"
  },
  optimization: {
    // Only needed to bypass a temporary bug
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        'mfe1': "mfe1@http://localhost:3000/remoteEntry.js"
      },
      shared: ["@angular/core", "@angular/common", "@angular/router"]
    })
  ],
};

mfe1 / webpack.config.ts

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:3000/",
    uniqueName: "mfe1"
  },
  optimization: {
    // Only needed to bypass a temporary bug
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({

      // For remotes (please adjust)
      name: "mfe1",
      library: {type: "var", name: "mfe1"},
      filename: "remoteEntry.js",
      exposes: {
        './Module': './projects/mfe1/src/app/app.module.ts',
      },
      shared: ["@angular/core", "@angular/common", "@angular/router"]
    })
  ],
};

общая библиотека package.json

{
  "name": "shared",
  "version": "0.0.1",
  "main": "src/public-api.ts",
  "peerDependencies": {
    "@angular/common": "^11.0.0-next.5",
    "@angular/core": "^11.0.0-next.5"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}

Эта конфигурация компилируется и запускается, но mfe1 создает экземпляр нового GlobalService. Я вижу, как построенный SharedService регистрируется при загрузке приложения, а затем снова, как только загружается удаленный модуль. Я попытался последовать другому примеру ScriptedAlchemy, но я не могу понять, как заставить его работать. Он либо компилируется, запускается и создает два экземпляра, либо не может скомпилировать, ссылаясь на отсутствующий модуль, в зависимости от того, как я испортил свою конфигурацию, я уверен.

В примере ScriptedAlchemy создается впечатление, что мне нужно сослаться на мою разделяемую библиотеку в моем массиве библиотек shared в файлах webpack.config.ts. Это имеет смысл, но я не могу заставить его работать

shell/webpack.config.ts and mfe1/webpack.config.ts
  ...
  shared: ["@angular/core", "@angular/common", "@angular/router", "shared"]

Если я буду ссылаться на локальную библиотеку таким образом, я неизбежно получу ошибки во время сборки.

Error: Module not found: Error: Can't resolve 'shared' in '/Path/to/module-federation-plugin-example/projects/shell/src/app'

Примеры, которые я опубликовал, упрощены. Надеюсь, не слишком, но вот ссылка на репо, который показывает проблему