angular - Angular 模块联盟 BrowserModule
问题描述
我正在使用 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-browser/animations,但没有运气。
我知道 webpack 5 不是当前 CLI 的官方部分,但我想知道是否有人已经偶然发现了这一点。我认为作为用例并不少见。
我已经建立了一个存储库来重现这里的问题:https ://github.com/paad/module-federation
这是否已经是一个已知问题?也许有人有建议?
解决方案
我有同样的问题,但成功解决了。
添加"@angular/animations": {singleton: true, eager: true}
到 Shell 和遥控器的共享块。
除了 AppModule 之外,您不需要导入BrowserAnimationsModule
或不再需要。NoopAnimationsModules
另外,没必要分享@angular/platform-browser/animations
推荐阅读
- spring - SpringBoot 创建框架启动库
- r - R - 帮助从 0 构建时间列?
- php - 对特定分类有问题循环
- mysql - 数据库架构:当记录具有不同数量的属性(列)
- python - beautifulsoup select 方法返回回溯
- android - 是什么导致 Google Play 开发者控制台中出现此警告:“我们检测到您的应用正在使用旧版本的 Google Play 开发者 API”
- php - 为什么添加标题后无法获取 POSTFIELDS?
- react-native - 如何在本机反应中跨组件全局调用一种方法
- c# - 类型列表参数的正确命名约定
- c# - 将委托转换为 lambda?