angular, федерация модулей без обмена ошибками Inject

Question

У меня есть угловые 12 приложений микрофронтенда, которые отлично работают, если я делюсь основными компонентами, подобными этому.

      shared: {
        '@angular/core': { eager: true, singleton: true },
        '@angular/common': { eager: true, singleton: true },
        '@angular/router': { eager: true, singleton: true },
      },

но если я удалю совместное использование и определю хост и дочерний элемент с пустым «общим», как этот дочерний элемент:

      plugins: [
    new ModuleFederationPlugin({
      name: 'profile',
      library: { type: 'var', name: 'profile' },
      filename: 'remoteEntry.js',
      exposes: {
        ProfileModule: './projects/mdmf-profile/src/app/profile/profile.module.ts',
      },
      shared: {
      },
    }),
  ],

хозяин:

      plugins: [
    new ModuleFederationPlugin({
      shared: {
      },
    }),
  ],

Я получаю эту ошибку во время выполнения:

      ERROR Error: Uncaught (in promise): Error: inject() must be called from an injection context
Error: inject() must be called from an injection context
    at yD (441.js:1:26044)
    at Object.gt (441.js:1:26219)
    at d.ɵfac [as factory] (441.js:1:168088)
    at AE.hydrate (main.js:1:201332)
    at AE.get (main.js:1:199395)
    at main.js:1:199708
    at Set.forEach (<anonymous>)
    at AE._resolveInjectorDefTypes (main.js:1:199692)
    at new iS (main.js:1:230293)
    at hd.create (main.js:1:230989)
    at Ge (polyfills.js:1:162723)
    at Ge (polyfills.js:1:162219)
    at polyfills.js:1:163611
    at ce.invokeTask (polyfills.js:1:153753)
    at Object.onInvokeTask (main.js:1:235279)
    at ce.invokeTask (polyfills.js:1:153672)
    at _e.runTask (polyfills.js:1:149032)
    at Q (polyfills.js:1:155855)

Я попытался включить библиотеки angular с настройкой «пути» в tsconfig, но это не помогло.

      "paths": {
      "@angular/*": [
        "node_modules/@angular/*"
      ]
    },

что нужно настроить, чтобы заработало?

Answer 1

У меня та же проблема,
которую я решил, отредактировав файл webpack.config.js . Следующий код ниже

webpack.config.js

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

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

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

module.exports = {
    output: {
        publicPath: "auto",
        uniqueName: "<projectNameWithCamelCase>",
    },
    optimization: {
        // Only needed to bypass a temporary bug
        runtimeChunk: false
    },
    resolve: {
        alias: { ...sharedMappings.getAliases() }
    },
    plugins: [
        new ModuleFederationPlugin({

            // For remotes (please adjust)
            name: "<projectNameWithCamelCase>",
            library: { type: "var", name: "<projectNameWithCamelCase>" },
            filename: "remoteEntry.js",
            exposes: {
               './Module': './src/app/.../<module-name>.module.ts',
            },
            shared: share({
                "@angular/core": { singleton: true },
                "@angular/common": { singleton: true },
                "@angular/router": { singleton: true },
                ...sharedMappings.getDescriptors()
            })
        }),
        sharedMappings.getPlugin()
    ],
};

пакет.json

        "dependencies": {
    "@angular-architects/module-federation": "14.3.14",
    "@angular-architects/module-federation-runtime": "^14.3.14",
    "@angular-architects/module-federation-tools": "^14.3.14",
    "@angular/core": "^12.2.16",
    "@angular/material": "^12.2.13",
  }