Angular Module Federation BrowserModule

Question

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?

Answer 1

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

Answer 2

I was not able to run your example, clicking links didn't do anything and localhost:3000 nor 3001 didn't display anything. But I have encountered similar issue that was caused by having essentially twice, once in shell application and second time inside the microfrontend.

Answer 3

We are trying to use prime ng menu component in our Microfrontend. we were trying to do the same adding platform animation in shared section of shell and remote app webpack file. Also imported the browser animation module only in shell app but got following error "Unexpeted Syncthetic listener @overlayanimation.start() found" Please share any working code in repo this will be helpful