Angular 模塊聯盟 BrowserModule

Question

我正在使用 webpack5 和 CLI11 開發模塊聯合原型，主要如下所述： https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/ .

基本上，我有一個主機應用程序，它從頁面 b 加載一個共享模塊。 然后應該在主機中使用該共享模塊。 它設置了一個RouterModule.forChild()並通過 webpack 共享。 到目前為止，這是有效的。

現在我添加了我們的一個組件，它在內部使用 animation 並且事情正在破壞。 在我的共享模塊中導入 BrowserAnimationsModule 或任何平台相關模塊（如 BrowserModule 或 NoopAnimationsModule 本身）后，主機應用程序將不再工作。 每次我導航到路由器時，路由器都會在另一個下方添加我共享內容的新副本。 我假設它每次加載模塊時都會創建一個新平台，但我該如何防止呢？

我還嘗試在應用程序和主機之間共享@angular/platform-browser/animations，但沒有運氣。

我知道 webpack 5 不是當前 CLI 的官方部分，但我想知道是否有人已經偶然發現了這一點。 我認為作為用例並不少見。

我已經建立了一個存儲庫來重現這里的問題： https://github.com/paad/module-federation

這是否已經是一個已知問題？ 也許有人有建議？

Answer 1

我有同樣的問題，但成功解決了。

將"@angular/animations": {singleton: true, eager: true}添加到 Shell 和遙控器的共享塊中。

除了 AppModule 之外，您不再需要導入BrowserAnimationsModule或NoopAnimationsModules 。 另外，沒有必要分享@angular/platform-browser/animations

Answer 2

我無法運行您的示例，單擊鏈接沒有執行任何操作，並且 localhost:3000 和 3001 沒有顯示任何內容。 但是我遇到過類似的問題，基本上是兩次，一次在 shell 應用程序中，第二次在微前端中。

Answer 3

我們正在嘗試在我們的微前端中使用 Prime ng 菜單組件。 我們試圖在 shell 和遠程應用程序 webpack 文件的共享部分中添加相同的平台 animation。 還僅在 shell 應用程序中導入了瀏覽器 animation 模塊，但出現以下錯誤“Unexpeted Syncthetic listener @overlayanimation.start() found”請在 repo 中分享任何工作代碼，這將很有幫助