如何解决Angular Module Federation 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
这已经是一个已知问题了吗? 也许有人有建议?
解决方法
我遇到了同样的问题,但成功解决了。
将 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" id"BTN" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
添加到 Shell 和遥控器的共享块。
您不再需要导入 "@angular/animations": {singleton: true,eager: true}
或 BrowserAnimationsModule
,AppModule 除外。另外,没有必要共享NoopAnimationsModules
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。