3

我正在尝试将 Webpack-5 模块联合实现到现有的大型现实世界应用程序。我正在尝试演示像angular-plugin-architecture-with-module-federation这样的插件。我将 SharedService 添加到共享库中，以模拟上面链接的示例应用程序中的应用程序和插件之间的通信。只有 1 个实例，并且在示例中一切正常，没有问题。

但是，在我现有的应用程序中，这不起作用，因为有 2 个服务实例。第一个实例在应用程序中创建，第二个实例在插件加载到其中时创建。我通过在构造函数的控制台中写入来验证这一点，并且有 2 行。此外，这可以通过在源代码中添加断点来看到。加载插件后，broser 的 Developer tools->Sources 中有两个 shared.service.ts 的源文件：

在此处输入图像描述

该应用程序使用上面屏幕截图中的第一个源文件。该插件使用 dist 中的文件。如何配置以使两者都使用相同的库实例并因此使用相同的服务？以下是更多信息：

项目/插件/webpack.config.js

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

module.exports = {
  output: {
    publicPath: 'http://localhost:4201/',
    uniqueName: 'plugins'
  },
  optimization: {
    // fix a temporary bug
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'plugins',
      library: { type: 'var', name: 'plugins' },
      filename: 'remoteEntry.js',
      exposes: {
        './Plugin1': './projects/plugins/src/app/plugin1/plugin1.component.ts',
        './PropertyPlugin': './projects/plugins/src/app/property-plugin/property-plugin.component.ts',
        './Plugin2': './projects/plugins/src/app/plugin2/plugin2.component.ts'
      },
      shared: {
        '@angular/core': {
          singleton: true,
          eager: true,
          requiredVersion: '11.0.0',
        },
        '@angular/common': {
          singleton: true,
          eager: true,
          requiredVersion: '11.0.0',
        },
        '@angular/forms': {
          singleton: true,
          eager: true,
          requiredVersion: '11.0.0',
        },
        '@angular/router': {
          singleton: true,
          eager: true,
          requiredVersion: '11.0.0',
        },
        rxjs: {
          singleton: true,
          eager: true,
          requiredVersion: "6.5.5",
        },
        shared: {
          singleton: true,
          eager: true,
          requiredVersion: '0.0.1',
          import: 'dist/shared'
        }
      }
    })
  ]
};

src/webpack.config.js

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

module.exports = {
  output: {
    publicPath: 'http://localhost:4200/',
    uniqueName: 'app'
  },
  optimization: {
    // fix a temporary bug
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({
      shared: {
        '@angular/core': {
          singleton: true,
          eager: true,
          requiredVersion: '11.0.0',
        },
        '@angular/common': {
          singleton: true,
          eager: true,
          requiredVersion: '11.0.0',
        },
        '@angular/forms': {
          singleton: true,
          eager: true,
          requiredVersion: '11.0.0',
        },
        '@angular/router': {
          singleton: true,
          eager: true,
          requiredVersion: '11.0.0',
        },
        rxjs: {
          singleton: true,
          eager: true,
          requiredVersion: "6.5.5",
        },
        shared: {
          singleton: true,
          eager: true,
          requiredVersion: '0.0.1',
          import: 'dist/shared'
        }
      }
    })
  ]
};

工作区看起来像示例工作区中的一个：

- projects
  - shared
    - src 
      - lib
        ...
    - package.json
      ...   
      
  - plugins
    - src
      - app
        ... plugin app is here
    - webpack.config.js
- src
  - app
  
  ... the main app is here
  
  -webpack.config.js          
-angular.json
-package.json

除了由于另一个问题我不得不将 package.json 复制到项目/插件之外。我完全坚持这一点，并一直在尝试一切让它工作但没有成功。

4

0 回答 0