Angular 模块联盟 BrowserModule

Posted 2023-02-16

【中文标题】Angular 模块联盟 BrowserModule

【英文标题】：Angular Module Federation BrowserModule

【发布时间】：2021-07-26 21:30:07

【问题描述】：

我正在使用 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

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

【问题讨论】：

你能分享示例代码仓库吗？

好了，抱歉回复晚了github.com/paad/module-federation

【参考方案1】：

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

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

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

【讨论】：

嘿，你能分享一个工作的例子吗？我需要在内部使用带有 BrowserAnimationModule 的库模块，但无法使其工作