Angular 模块联合 BrowserModule

2023-11-26

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

它已经是一个已知问题了吗? 也许有人有建议?


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

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

你不需要导入BrowserAnimationsModule or NoopAnimationsModules除了 AppModule 之外。另外,没有必要分享@angular/platform-browser/animations

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 模块联合 BrowserModule 的相关文章

随机推荐

  • SQL ORDER BY 与 CASE 与 UNION ALL

    运行 PostgreSQL 7 4 和 8 x 我认为这是有效的 但现在我遇到了错误 我可以单独运行查询 它工作得很好 但如果我 UNION 或 UNION ALL 它会抛出错误 出现错误 警告 pg query 查询失败 错误 列 Fie
  • Amazon S3 + 雾警告:连接到匹配区域将获得更高性能

    通过 Fog gem 查询 Amazon S3 时 我收到以下警告 WARNING fog followed redirect to my bucket s3 external 3 amazonaws com connecting to t
  • 如何在SQL Server中备份对称密钥?

    我使用下一个代码来创建 SQL 加密密钥 CREATE MASTER KEY ENCRYPTION BY PASSWORD
  • 如何使用 Python 验证手机号码?

    我正在尝试验证手机号码 以下是我到目前为止所做的 但它似乎不起作用 当传递的值看起来不像手机号码时 我需要它引发验证错误 手机号码长度可以是 10 到 14 位 以 0 或 7 开头 并且可以添加 44 或 44 def validate
  • Laravel 5 配置 - 环境和重写

    我安装了新的 Laravel 5 副本 我的 detectorEnvironment 函数是这样定义的 app gt detectEnvironment function return local return getenv APP ENV
  • 在 Django Admin 中订购多对多字段

    这是我的设置 from django contrib auth models import User class Product models Model email users models ManyToManyField User nu
  • Spark RDD 到 DataFrame python

    我正在尝试将 Spark RDD 转换为 DataFrame 我已经看过该方案传递给的文档和示例sqlContext CreateDataFrame rdd schema 功能 但我有 38 个列或字段 并且还会进一步增加 如果我手动给出指
  • CakePHP 中的 GROUP 和 COUNT() 年龄

    我正在尝试使用 CakePHP 按出生日期进行分组并根据结果进行计数 这是我的查询 data this gt User gt find all array fields gt array DATE FORMAT NOW Y DATE FOR
  • CKEditor 剥离 标签

    我正在尝试找到一种解决方案来避免使用 CKEditor 但旧版 FCKeditor 也会删除任何内容 i 将之前插入的内容标记到数据库中 Case 我将 html 内容插入到数据库中 一些内容包含 i 元素 我使用 CKEditor 来完成
  • Jquery mobile:单击时更改主题

    我有一个主题为 a 的基本列表 我正在尝试找到一种在单击按钮时更改主题的方法 试过 a li attr data theme a 与列表刷新相结合 但没有运气 成功了吗 您必须在页面中搜索所有 ui body ui button up ui
  • 如何在 AngularJS 中编写指令

    我喜欢使用指令制作自定义组件 我检查了很多教程 它让我感到困惑 任何人都可以解释指令是如何工作的 我计划制作的组件是
  • Android:MediaPlayer setVolume 函数

    关于参数 设置什么让播放器没有声音和全声音 Thanks 这个功能其实很精彩 多亏了它 您可以创建具有任意数量步骤的体积比例 假设您需要 50 个步骤 int maxVolume 50 然后要将 setVolume 设置为该范围 0 49
  • 如何使用android支持库中的Chips组件?

    我已阅读有关的文档官方网站 但我无法按照文档在我的项目中实现 Chip Android Studio 找不到并导入Chip类以及Chip view 我还注意到谷歌开发者网站Chip类没有参考 还有一些类似的问题 但所有答案都指向使用第三方库
  • 保存反应文件时 Visual Studio 代码错误?

    And when i am saving this file with Ctrl s even using prettier and other javascript extension snippets in visual code i
  • 为什么 TensorFlow 返回 [[nan nan]] 而不是 CSV 文件中的概率?

    这是我正在使用的代码 我正在尝试在真实的测试集中获得 1 0 或希望结果的概率 当我只是分割训练集并在训练集上运行它时 我得到了大约 93 的准确率 但是当我训练程序并在实际测试集 第 1 列中没有填充 1 和 0 的测试集 上运行它时 它
  • 如何解决使用 AsyncStorage(已弃用)警告?使用社区(正确)库

    我正在使用 react native community async storage 并不断收到此警告 Warning Async Storage has been extracted from react native core and
  • 如何解决 TypeError: 'float' 对象不可迭代

    我怎样才能转移 A 0 12075357905088335 0 192198145631724 0 9455373400335009 0 6811922263715244 0 7683786941009969 0 0331122279846
  • Amazon EC2 中的 HTTPS 设置

    我们如何在 Amazon EC2 中启用 HTTPS 我们的网站正在 HTTP 上运行 首先 您需要打开 HTTPS 端口 443 为此 您可以访问https console aws amazon com ec2 并单击Security G
  • 从 Gradle 中的 Url 编译 Jar

    是否可以做类似的事情 compile files http ho st jar MyLibrary jar 在 Gradle Android Studio 中 可能的优点 始终获取最新版本 如果必须手动下载并复制 则并不总是拥有最新版本 即
  • Angular 模块联合 BrowserModule

    我正在使用 webpack5 和 CLI11 开发模块联合原型 主要如下所述 https www angulararchitects io aktuelles the microfrontend revolution part 2 modu