4

我正在使用 webpack5 和 CLI11 开发模块联合原型，主要如下所述：https ://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/ .

基本上，我有一个主机应用程序，它从页面 b 加载一个共享模块。然后应该在主机中使用该共享模块。它设置了一个RouterModule.forChild()并公开通过 webpack 共享。到目前为止，这是有效的。

现在我添加了一个组件，它在内部使用动画并且事情正在破坏。在我的共享模块中导入 BrowserAnimationsModule 或任何平台相关模块（如 BrowserModule 或 NoopAnimationsModule 本身）后，主机应用程序将不再工作。每次我导航到路由器时，路由器都会在另一个下方添加我共享内容的新副本。我假设它每次加载模块时都会创建一个新平台，但我该如何防止呢？

我还尝试在应用程序和主机之间共享@angular/platform-b​​rowser/animations，但没有运气。

我知道 webpack 5 不是当前 CLI 的官方部分，但我想知道是否有人已经偶然发现了这一点。我认为作为用例并不少见。

我已经建立了一个存储库来重现这里的问题：https ://github.com/paad/module-federation

这是否已经是一个已知问题？也许有人有建议？

4

2 回答 2

4

我有同样的问题，但成功解决了。

添加"@angular/animations": {singleton: true, eager: true}到 Shell 和遥控器的共享块。

除了 AppModule 之外，您不需要导入BrowserAnimationsModule或不再需要。NoopAnimationsModules另外，没必要分享@angular/platform-browser/animations

于 2021-05-16T15:45:13.260 回答
0

我无法运行您的示例，单击链接没有执行任何操作，并且 localhost:3000 和 3001 没有显示任何内容。但是我遇到了类似的问题，这是由于基本上有两次，一次在 shell 应用程序中，第二次在微前端内。

于 2022-02-15T16:40:18.013 回答