8

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?

PaaD
  • 113
  • 6

3 Answers3

10

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

mattae
  • 146
  • 1
  • 3
  • Hey, can you share a working example? I need to use library modules with BrowserAnimationModule inside and can't make it work – Jakub Biernaczyk Aug 04 '21 at 10:13
  • Hi , 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 – M.Uma Aug 25 '22 at 18:25
  • I have tried above steps but no luck – vamsi Feb 14 '23 at 19:26
0

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.

JanBrus
  • 1,198
  • 9
  • 13
0

Adding "@angular/animations": {singleton: true, eager: true} alone does not fix the issue for me. For me I added '@angular/platform-browser/animations':{singleton: true, strictVersion: true, requiredVersion: 'auto'} this also. And removed BrowserModule and BrowserAnimationsModule in all the Micro Front End apps.

Below is my webpack.config.js shared modules

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()
        })
Alphonse
  • 37
  • 8