I am working on a module-federation prototype with webpack5 and the CLI11, mostly as described here: https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/.
Basically, I have a host application, that loads a shared module from page b. That shared module should be used in the host then. It sets up a RouterModule.forChild() and is exposed to be shared via webpack. That works, so far.
Now I added one of our components, which uses animation inside and things are breaking. With the BrowserAnimationsModule or any platform related module like the BrowserModule or NoopAnimationsModule itself imported in my shared module, the host app will not work anymore. The router will just add a new copy of my shared content underneath one another every time I navigate to it. I assume it creates a new platform everytime it loads the module, but how can I prevent that?
I have also tried to share the @angular/platform-browser/animations across app and host, but without luck.
I know that webpack 5 is not official part of the current CLI, but I wonder if anybody already stumbled upon this. I think it is not that uncommon as a use-case.
I have set up a repository to reproduce the issue here: https://github.com/paad/module-federation
Is it already a known issue? Maybe someone has suggestions?
I had the same issue, but successfully resolved it.
Add "@angular/animations": {singleton: true, eager: true} to the shared block of both the Shell and remotes.
You don't need to import BrowserAnimationsModule or NoopAnimationsModules anymore, except for the AppModule. In addition, it is not necessary to share @angular/platform-browser/animations