webpack Angular 模块联合浏览器模块

2nc8po8w 于 2023-03-12 发布在 Webpack

关注(0)|答案(3)|浏览(163)

我正在使用webpack 5和CLI 11开发一个模块联合原型，主要如下所述：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
这是一个已知的问题吗？也许有人有建议？

webpack

来源：https://stackoverflow.com/questions/67386392/angular-module-federation-browsermodule

3条答案

按热度按时间

gfttwv5a1#

我遇到了同样的问题，但成功解决了。
将"@angular/animations": {singleton: true, eager: true}添加到Shell和远程的共享块中。
除了AppModule之外，不再需要导入BrowserAnimationsModule或NoopAnimationsModules，并且不需要共享@angular/platform-browser/animations

赞(0）回复(0）举报 2023-03-12

6za6bjd02#

我无法运行你的例子，点击链接没有任何作用，localhost：3000 nor 3001也没有显示任何内容。但我遇到过类似的问题，这是由两次引起的，一次在shell应用程序中，第二次在微前端中。

赞(0）回复(0）举报 2023-03-12

xu3bshqb3#

单独添加"@angular/animations": {singleton: true, eager: true}并不能解决我的问题。对我来说，我还添加了'@angular/platform-browser/animations':{singleton: true, strictVersion: true, requiredVersion: 'auto'}。并删除了所有微前端应用程序中的BrowserModule和BrowserAnimationsModule。
下面是我的webpack.config.js共享模块

shared: share({
          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 
          "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/animations": {singleton: true, strictVersion: true, requiredVersion: 'auto'},
          '@angular/platform-browser/animations':{singleton: true, strictVersion: true, requiredVersion: 'auto'},

          ...sharedMappings.getDescriptors()
        })

赞(0）回复(0）举报 2023-03-12

我来回答

webpack Angular 模块联合浏览器模块

3条答案

相关问题

热门标签

最新问答